.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

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

手書きでイラスト

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

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

うううう、難しい。。。

検索ページをスタイリング

sumo

リクナビ

吉本タレント検索

レコチョク検索

amazon

zozo

model search

model town:http://www.modeltown.jp/index.php?app_controller=search&type=items&run=true
モデルタウンすげーな、髪型で検索できんのかよ!めっちゃいいやんけ。
私も機械学習の画像認識で、髪型登録して、髪型検索のサービス作りたいです。。。。

初期画面

シンプルだが及第点ってところか?

OK, 悪くない

後は、メール受信画面を成形

ほぼ出来たか?

メールボックス ログイン後のUI

hotmail: 大人っぽいデザインです。

gmail:やすっぽい印象があり、あまり好きではない

yahoo:ごちゃごちゃしていて見にくい

アマゾン:特に感想なし

テキスト小さめで、ヘッダーは黒・紺の方が落ち着いて見える気がします。

初期画面

アカウント登録画面のデザイン

amazon: カッケー

hotmail: 渋い

yahoo: ヤフーっぽい感じが出てて、なんか好感持てる!

google: ああ、登録画面はGoogleが一番いいかも。特にセキュリティをケアしているところが好きだ。

どこも、基本はログインの画面と整合性が取れてますね。
なるほど!

初期画面

css

.form1{
	width:100%;
	height:30px;
	margin-top:5px;
}
.submit {
	width:100%;
	height:30px;
	margin-top:5px;
	background-color:#0099FF;
	color:#fff;
	border:0px;
}
select{
	width:100%;
	height:30px;
	margin-bottom:5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: 1px solid #999;
	padding-left:5px;
}

修正後 ->
適当だけど雰囲気はそれっぽい(笑)