2023/10/11 レスポンシブデザイン実践 : パソコン版デザイン
「レスポンシブデザインの考え方」
・パソコン / スマホどちらを優先するか
↪︎用途に合わせて判断。
１.フレーム作成 - W:1800px
２.レイアウトグリッド
- 列数12,コンテンツW:1300
- Shift + R 定規の表示
- コンテンツW:1300に定規ガイドを合わせ、幅余白を設定
- 「ガター」グリッド線の間のライン
3. ヘッダーデザイン -優先度を考慮
- 優先度(ゴールの設定)
- ヘッダー画像を設置
- ハンバーガーメニューはラインツール、長方形ツール
- メインカラーの登録
- Command + D 同じ動作の繰り返し
- 「塗り」の透明度設定→「I」スポイトで透明度込みのカラー抽出
-
メインビジュアル
- 長方形ツールを使用
-
コンポーネントを使用したグローバルナビ
- アイコンをコンポーネント化「icon / setsumeikai」
- セクション作成「コンポーネント」
-
横スクロールオブジェクト
- 長方形設置
- セクションタイトル
- 黄金比 1:1.618
- 「コンテンツを切り抜く」ボタン,
(はみ出したコンテンツを表示させる) - Shift + H 画像の反転
7.写真やテキストを綺麗に見せる
- 写真,トリミング機能の活用
- 自動カーニングの使用可否がフォントによる
8.入れ子のフレームによるレスポンシブ化
-複雑な入れ子のフレームの使い方
9.優先度の高いバナーフレーム
- フッターエリア、調整し易いリンクの作り方
- 全体の調整
-「メインコンポーネントに移動」ボタン- 外側のフレームをCommand + クリックで検索機能
12.美しいデザインにする為に
- 配色をシンプルに
- 文字は16pxが基本サイズ
- 余計な装飾をなくし、余白でグループ分けを行う
- 「デザインの4大原則」
↪︎近接 : 関係する情報を近づける
↪︎整列 : 要素に一体性を持たせる
↪︎強弱 : 優先度をつけ、違いを明確にする
↪︎反復 : 要素を繰り返すことで一貫性を持たせる
！強み … ジャケットデザイン、写真撮影の経験はウェブデザイン業務での画像素材の選定やレイアウトを組むバランス感覚に活かせそう。
———よく使うショートカット
・フレームの選択 … 「Command+クリック」
・要素のコピー … 「option + コピー」
・キーボード操作だとフレームインしない
・ショートカット
ズームイン/アウト … 2本指
コピペ … Command + C,V
複製 … Command + D
スタイルを引き継かずペースト … Command + Shift + V
スタイルのみコピぺ … Comannd + Option + C / V
画面を動かす … Space + ドラッグ
拡大縮小 … K
———便利プラグイン
Font Viewer … フォント図録
iconify … SNSなど含むアイコンリスト
Hand Wireframe … フリーハンドのワイヤーフレーム
Unsplush … 写真素材
Better Font Picker … フォント
Insert Big Image … 大きい画像を非圧縮で配置
Contrast … コントラスト比を判定
uiGradients ... グラデーションライブラリ
Material Design Icons ... Googleが提供するアイコン素材集