DINを見てみよう

DINはuniquloで使われているフォントだそうです。
https://www.uniqlo.com/jp/stylingbook/pc/user_styling

縦に細長いですね。Dinにもいろいろある様です。
「Din 1451 Alt」

更に細長い?
「OSP DIN」

「Bebas Neue」

“DIN” is a german font.
Originally, the font was made for industrial use, and it was said that the purpose was to unify the font such as the model number description in the industry to this “DIN”. So, “DIN” is an abbreviation of “Deutches Institut fur Normung” and Deutsches Institut fur Normung is the officcial name of DIN.

これは目的によるな~

ではユニクロのfontを見てみましょう。
https://www.uniqlo.com/jp/css/default.css
[ccs]
body{
font:13px ‘ヒラギノ角ゴPro W3′,’Hiragino Kaku Gothic Pro’,’游ゴシック’,’Yu Gothic’,’游ゴシック体’,’YuGothic’,メイリオ,Meiryo,sans-serif;
color: #000000;
background: #e6e6e6;
}
[/ccs]

なるほど、ヒラギノ角ゴPro W3か。iPhoneと一緒ですね。
ところで、webデザインの大手ってどこでしょう? IMK?
imjのサイトを見てみましょう。あ、どーでもいいですが、知り合いimjで働いてますね。

で、imsのfont-familyはというと
https://www.imjp.co.jp/resources/css/common.css

body, input, textarea, select, option, button {
  background: #fff;
  font-family: "Gotham SSm A", "Gotham SSm B", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
  font-style: normal;
  line-height: 1.7;
  color: #000;
  font-size: 14px;
}

Gotham SSm A???????????????
なにいいいいいいいいいいいいいいいいいいいいいいいいいいいいい

San-serif Futura

Futura is a Latin-language sans-serif typeface announced by Paul Renner, who worked as a part-time lecturer at the Bauhaus in Germany in 1923. Futura is a Latin word meaning “future”.

Adobe Fonts: Futura
https://fonts.adobe.com/fonts/futura-pt

Futura is one of the most popular fonts in the world, and is used in many corporate logs.
ほう、会社のロゴはfuturaにしようかな。
A, M, V, Wが非対称で、〇が円になっているとのこと。

CCS3でfuturaは使えるようです。
CCS3で使える欧文フォント
– Futura
– Neue Helvetica
– Avenir
– Sackers Gothic
– DIN Next
– Garamond #3
– Trade Gothic
– Neue Frutiger
– VAG Rounded
– Univers

何?DINもCCS3で使えるんかい!!!

「いらすとや」を使おう

「いらすとや」ってよく見ますよね。個人ワークだけでなく、たまに商用のデザインでもみますし、Youtubeにも使われていたりします。
まず、ホームページ
https://www.irasutoya.com/

もっとゴテゴテした感じかと思いきや、意外とシンプルな作りですね。

個人情報の取扱いに関するお問い合せ先
いらすとや みふねたかし
E-mail: mifunet@gmail.com

Twitter
https://twitter.com/mifunet

まじかよ、これ、個人で作ってんのかよ。。すげーな、この人。。

免責事項
>当サイトの使用及び閲覧は、利用者の責任において行うものとします。内容につきましては最新の注意を払って編集しておりますが、正確性、有用性、確実性、安全性について保証するものではありません。

すげーなこれ。さっそく、「いらすとや」をつかって、UberEatのビジネスモデルを書いてみましょう^^

.swf

.sft is an extension attached to a video file created by the animation creation software for the Web “Flash” sold by Macromedia.
In order to play .swf format files, playback software called “Flash Player” is required.

font faceでの書体一覧を検証する

参考サイト:http://www.jp-ia.com/_web/face.html
AR Pペン行楷書体L, AR Pペン楷書体L, AR P勘亭流H, AR P古印体B, AR P行楷書体H… Wingdings 2, Wingdings 3

大量にあるので、中心的な書体をピックアップしたいと思う

あれ、メイリオない?

-ゴシック体
-明朝体
-sanserif

さて、これをtinyMCEに実装したい
stack overflowに書いてありそう。。
https://stackoverflow.com/questions/15499198/how-to-add-a-new-font-in-tinymce-editor

あ、ここにサンプルがある
https://codepen.io/anon/pen/przvoq

tinymce.init({
  selector: 'textarea',
  height: 500,
  plugins: 'code',
  toolbar: 'undo redo | fontsizeselect fontselect',
  content_css: ['//fonts.googleapis.com/css?family=Indie+Flower'],
  font_formats: 'Arial Black=arial black,avant garde;Indie Flower=indie flower, cursive;Times New Roman=times new roman,times;'
});

そうですね、やりたいのはこういうことです。

font face=””でフォントを指定する

とりあえず、明朝、ゴシックで比較

<p>通常フォント</p>
<p><font face="MS P明朝">通常フォント</font></p>
<p><font face="MS Pゴシック">通常フォント</font></p>
<p><font face="Impact">font test</font></p>

全然違いますね~

しかし、これデザイナーの領域だな。。。

>重要なのは、可読性、視認性、判読性を意識しながらの「TPOに合わせたフォント選び」
なるほど、テイストによって分けるのは理解できる。。
まず、どんな文字があるのか知らないといけない。。

wireframe cc 日本語文字化け

wireframe ccを使って、ワイヤー書いたのはいいんだけど、エクスポートしようとすると、日本語が、文字化けする。

ああああああ、きっついなー
exportする際に、pngとpdfが選べるんだが、どちらも文字化けする。。

settingで文字コードの指定がないし、おそらく日本語には対応していなんだろう。
うーん、困った。

しょうがない、ctr + [-] で縮小して画面キャプチャしかない。。
教訓: 海外のデザインツール/モック作成ツールを使用する際は、文字コードに気を付けろ(涙目)

【2019年度版】Webデザイン最新トレンド

Webデザインの最新トレンドはどうなっているか? 
イケてるデザイン会社で働いていたことがありますが、Web制作におけるデザインの最新トレンドの調査は、既に作られているものを見ていきます。
ただし、ディーテールになると、デザインの基礎を学んでいるか否かで、アウトプットの質がかなりかわってきます。よって、デザイン系の専門学校卒の人材を多く抱えている制作会社は、デザインに強い印象があります。

さて、何を見るか?
沢山のサイトのキャプチャを集めたギャラリーサイトを見るのが手っ取り早いですね。
トレンドを見ていきましょう。傾向や感想を箇条書きで書いていきます。

Web Design Trend
– ヘッダー、フッターがなく、メインビジュアルの上にテキストを載せているデザインが多い
muuuuu
– MVのメッセージが英語が多い
– どこもfontをサイトに併せている
– 落ち着いたデザインが多い。奇抜な構成は少ない
WebDesignClip
– サービスと画像が直結している
– スタイリッシュが多い。文字は全体的に少ない
io3000
– pixta、potolio などにある画像をそのまま使っているサイトは殆どない
– 普段、殆ど目にしないような写真を大体使ってる
– background white, font-color blackが異常に多い
– 日本人男女の写真はほぼない
responsibe design japan
– 高品質の価値提供系が多い
写真をグラフィック加工しているサイトはカッコいい、目立つ
– 動画はあまりない
S5-Style
– 3Dを表現しているサイトは子供っぽくみえる。
– 日常のちょっとしたお洒落が多い。イメージでいうと、自由が丘。
81-web.com
– 飲食系はカメラマンの腕が光る
– 上部ヘッダーメニューがあると、少し古く感じる
– 冷たい感じが多い
– シンプルなファッションが多い、コテコテは少ない
bookma! v3
– いわゆる昭和感を狙ったデザインも悪くない
– 高層ビルなどは殆どない (一昔前は新宿、東京タワーなどが良く使われていた)
– イラストは基本的にクオリティが非常に高い
awwwards.
– 動きがあるのはやっぱりカッコいい!
WPesign Gallery
– ここだけデザインが古い
WEloveWP
– WordPressでも、ヘッダーがない傾向が顕著

最後にfortune のfuture-50のサイトのデザインを見ておきましょう。
http://fortune.com/future-50/

1位 workday
確かに今っぽいw

2位 weibo
weiboは良くも悪くも中国っぽい。デザインもbaidoと似ている。

3位 ServiceNow
うおおおおおおおおおお、かkkkkkkkkkkkkっけ
こういうの作ろ^^

4位 ctrip.com international
ファーストビューに検索ボックスがあると、なんかいいね♪

5位 vipshop holdings
なんだ、このふざけた社名は?? 大きい声では言えんが、明らかにvipを対象にはしてないよね。
デザインからターゲット層がなんとなく想像つくわww

6位 NAVER
韓国ではこんな感じか。だいぶ「NAVER まとめ」や「LINE」とはイメージ違いますね。知性を感じる。

7位 vertex pharmaceuticals
あ、これはカッコいい。多分プロのデザイナーがつくってる。素人でこの感じは出せない。

8位 Netflix
なんだろ、コメントに困るなー。何とも言えない感じ。単純に映画があんまり好きでないから、あんまり親しみを持てない というか、上手くいってるのに嫉妬する

9位 s.f. holdings
ホームページなし??????? マジかよ。すげー

10位 Salesforce
キャラクターが今っぽい。悪くないね。salesforce

ということで、ある程度、トレンドが見えてきたかも。

手書きでイラスト

段々イラストレーターさんと仕事する機会も出てきましたね。何故かわかりませんが。

ある方に、イラストを描いてみたら、と薦められたので、
可愛い魔女

うううう、難しい。。。