フラットデザイン
シンプルで平面的なデザイン。データ量が少ない。
マテリアルデザイン
影を使うなど立体的。Googleの制作ガイドラインがある。
影や奥行きなどで、押す感覚をつけてボタン操作などを分かりやすくする。
AtomicDesign
コンポーネントから始めて、コンポーネントを組み合わせて、徐々に大きく広く作成していくデザイン手法
配色
ベースカラー、メインカラー、アクセントカラー
[ベースカラー70%]、[メインカラー25%]、[アクセントカラー5%]の割合にする。
ベースカラー ”背景”などに使われる色
メインカラー ロゴやバナー、メインコンテンツなどに使う”主要な色”。配色を決める際にはメインカラーを始めに決める。
全体のイメージになる。
アクセントカラー 「申し込みボタン」などの、”目立たせたい箇所”、コンテンツに使う。
トレース
photoshopを使う。ページ全体のスクリーンショットを撮る。
フォントをチェックする。
スクリーンショット
PCでのスクリーンショット
windowsキー+ PrintScreenキー
(ノートPCの場合、windowsキーの隣にある[FNボタン]も一緒に押す)
画面全体のキャプチャが「ピクチャー」ライブラリの「スクリーンショット」フォルダーに自動的に保存される
Firefoxでのスクリーンショット
開発ツール(F12キー)から、カメラのアイコンをクリック。ページ全体のスクリーンショットが撮れます。
PCのダウンロードフォルダに保存されます。
開発ツール
F12キー
位置、大きさの計測
firefox
・
右上にある横定規のアイコンをクリック。
位置情報が縦、横px単位で表示されます。ドラッグするとW(幅)、H(高さ)、\(対角線の長さ)が表示されます。
・
右上にある縦横定規のアイコンをクリック。
サイト上に水平、垂直の定規が表示されます。
拡張機能
Gogle Chromeやfirefoxなどの拡張機能。
フォントを調べる
What Font Gogle Chrome
FontFinder firefox
大きさを計る
measureit
「Gogle Chrome」 「firefox」共にある。
大きさ、位置を計る
Page Ruler
「Gogle Chrome」
Width(幅)、Height(高さ)、Left(左側の位置)、Top(上部の位置)、Right(右側の位置)、Bottom(下部の位置)が表示されます。
左上のElementsをクリックすると各要素についても測定できます。
スクリーンショット
FireShot 「firefox」「Gogle Chrome」
・ページ全体をキャプチャー ・表示部分をキャプチャー ・選択範囲をキャプチャー
色を調べる
ColorPick Eyedropper 「firefox」「Gogle Chrome」
レイアウト
見出しの周囲に空間を空け目立たせる
きほん
フローティングボタン
基本的に画面に1つだけ配置される。重要な操作に対してのみ
レイズドボタン
フラットボタン
文字だけのボタン。サイト内のテキストと区別できるようにする。
HTMLとCSSでのボタンつくりかた
フォント
フォントを使いすぎない。タイトル、本文、アクセントなど3種類ぐらいにとどめる。
-
線が細く、やや見づらい明朝体より、はっきりとしたゴシック体にする。
-
長い文章の場合、太すぎる書体はNG。
-
フォントに強弱、大小をつけて文章に優先順位をつけ読み手に分かりやすく印象に残るようにする。
外部リンク参考サイトさん
フォントについて
タイポグラフィ
フォント、サイズ、文字と文字との間隔、行間、配置等を上手く組み合わせて、読みやすく美しくする方法です。
フォントを使いすぎない
タイポグラフィ設計
p要素、見出し要素(h1~h4)などのテキストの設計。
フォントサイズや行間、字間など。
具体例
- 写真の上に文字を描く
- 曲線に沿って文字を描く
- 図形やイラストに沿って文字を描く
ライティング
まず、ページ、サイトを訪れた時、一目で内容がわかるようにする。
タイトル、見出しで内容が分かる。
検索ワードを考えてのライティング。
リライト
記事などの文章を再度書き直すこと。ほぼ全部を一から書き直すことを特に言う。
ユーザビリティ
使いやすさ
UI
ユーザーインターフェイス
-
要素など減らし、シンプルにしてユーザーを迷わせないようにする。
-
どこに何があるのか、はっきり、分かりやすくする。
-
ボタンなど、クリックできる部分を明確にする。
-
現在の場所が分かるようにする。
-
ズームや横スクロールがないようにする。
-
フォントと背景とのコントラストをはっきりとさせる。
iOS でのユーザインターフェイス
UX(ユーザーエクスペリエンス)
User Experience。ユーザー体験のこと
UXハニカム
ユーザー・エクスペリエンス・ハニカム
Useful
役に立つ。ユーザーのニーズを満たしている。
Usable
使いやすい。画面設計など。
Findable
探しやすい、見つけやすい。パンくずリストなどで、すぐに現在位置がわかるようにする。
Credible
信頼できる。サイトポリシー、プライバシーポリシーの存在。企業情報、製作者情報などの明記。
直帰率が低い。
Accessible
アクセスしやすい。SEO対策など。
Desirable
好ましい