Tech Academy の受講メモ　第３回

皆様おはようございます🌞
本日もとっても良い天気です✨少し汗ばむほどに🙇‍♀️💦💦

外温27度。暑さに弱い私は、
この先これ以上気温が上がるなんて、想像したくないです('･_･`)

『”WEBデザイン”学習記録　ひとことメモ』として
学習して大事だと思った感想、学習noteを残します。
興味ある方どうぞ。

『”WEBデザイン”学習記録　ひとことメモ③』

★制作フローについて〜一般的なWEB制作の流れ
❶企画
❷サイト設計
❸デザインカンプ制作
❹HTMLコーディング

---

❶企画/要件定義
・ヒアリング：クライアントの要望や問題点の聞き出し
　　⏬
・ゴールの設定：サイトの目的
　　⏬
・シナリオの想定：ターゲットユーザーとユーザーが利用する背景や行動

？ターゲットユーザーとは？
❌そのサービスや商品を利用しそうな人
⭕️職業・年齢・性別・国籍・障害の有無などまで詳細に設定（ペルソナ）

❷サイト設計/全体の骨格把握
・必要な情報のリストアップ
　　⏬
・サイトマップ制作：情報の分類・グループ化。優先順位をつけ、組織化。
　　⏬
・ワイヤーフレーム制作：ページの設計図（レイアウト）
色や細かい装飾などはせず、何をどこに配置するのかを決めていく

※ページ出しを曖昧にしておくと、デザインや実装で困る
※まずは手書きでアイデア出し、Cacooなどのツールで清書

？シングルカラムレイアウトとは？
左右にサイドコンテンツを持たず、情報を上から下へと垂直に配置するシンプルなレイアウト手法。

利点：モバイル端末でも同じレイアウトで提供できるため、レスポンシブWebデザインにも対応しやすい＝マルチデバイス化しやすい

注意点：情報量と優先順位の設定
１情報量が多いとコンテンツが縦に長くなりやすい
２コンテンツの幅が広いと、横方向への可読範囲が広がる
以上が、ユーザーが疲れを感じる原因になる。

❸デザインカンプ制作/Photoshopでデザインを作り込む
・ページレイアウトデザイン
　　⏬
・配色デザイン※前記事参照
（ベースカラー 70%/サブカラー 25%/アクセントカラー 5%）
　　⏬
・WEBフォントデザイン
　　⏬
・アイコンフォントデザイン

？サイト検証に使われる”モックアップ”とは？

モックアップとはほぼ完成品に近い、または完成したデザインを利用して基本的な機能面を確認するためのもの。工程としてはデザインカンプとHTMLコーディングの間だったり、ワイヤーフレーム作成とデザインカンプの間だったりWebサイトの制作過程によって変化する。

❹HTMLコーディング/プログラムの記述
デザインカンプを元に、ブロックごとにブラウザで表示できるようにする。

以上です。第４回に続きます(ू•‧̫•ू⑅)🌟