Designpc操作中

目次

トレース(
スクリーンショットや,
ツールなど)
のとこへ
拡張機能
(Gogle Chromeや
firefoxなど)
のとこへ
ボタン
のとこへ
UX
(ユーザーエクスペリエンス)
のとこへ

きほん

数字は大きく、単位は小さく。
いろいろなスタイルのフォントを組み合わせる.
屋外でも見やすいようにする。

グルーピング(近接) 関係の近いもの、文章や画像、タイトルなどは近づける

配置

三分割 画面を縦横、3分割にして9等分します。
それらの線上、交差点付近にメインとなるものを配置すると安定します。

黄金比縦と横の比率が1:1.618のもの

アイキャッチ ビジュアルに視線を集め、アイキャッチ付近に情報を配置し閲覧してもらうことで、ユーザーに次のアクションを起こさせる視線誘導になります。

矢印には、誘導性があります。

フラットデザイン

シンプルで平面的なデザイン。データ量が少ない。

マテリアルデザイン

影を使うなど立体的。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種類ぐらいにとどめる。 外部リンク参考サイトさん フォントについて

タイポグラフィ

フォント、サイズ、文字と文字との間隔、行間、配置等を上手く組み合わせて、読みやすく美しくする方法です。

フォントを使いすぎない
タイポグラフィ設計

p要素、見出し要素(h1~h4)などのテキストの設計。

フォントサイズや行間、字間など。
具体例

ライティング

まず、ページ、サイトを訪れた時、一目で内容がわかるようにする。 タイトル、見出しで内容が分かる。

検索ワードを考えてのライティング。 リライト 記事などの文章を再度書き直すこと。ほぼ全部を一から書き直すことを特に言う。

ユーザビリティ

使いやすさ

リラックスしてPC

UI

ユーザーインターフェイス

iOS でのユーザインターフェイス

UX(ユーザーエクスペリエンス)

User Experience。ユーザー体験のこと

UXハニカム

ユーザー・エクスペリエンス・ハニカム

Useful 役に立つ。ユーザーのニーズを満たしている。 Usable 使いやすい。画面設計などFindable 探しやすい、見つけやすい。パンくずリストなどで、すぐに現在位置がわかるようにする。 Credible 信頼できる。サイトポリシー、プライバシーポリシーの存在。企業情報、製作者情報などの明記。
直帰率が低い。 Accessible アクセスしやすい。SEO対策など。 Desirable 好ましい 上へボタン