タグ: Webサイト制作

2023年3月10日 コメントする

3月10日（金）－レイアウトデザイン基礎①/ワイヤーフレーム

制作のポイント

情報をしっかりまとめてからレイアウトを考えると良いでしょう。そのレイアウトが、HTMLとCSSというルールに変わるだけです。
まずは、PCサイズとして下記の例のような、コンテンツ部分が960pxでその外側部分を入れて、1280pxでワイヤーフレームを作成してみましょう。

メモ

【先生より、コーディング系おすすめサイト】
・coliss
・MDN Web Docs
・PhotoshopVIP

【作業について】
・先生は、ワイヤーフレームを印刷したら手書きでpxなど書き込み、横に置いて見ながら作業するのがおすすめとのこと
・本は、このサイトを作ってみましょうのような本より、CSSサンプル集のような「このCSSでこんなことができます」というようなサンプルが羅列された本がよい
※そこまで頻繁には内容は変わらないけど、数年前とかの本だと情報が古く今のHTML・CSSのバージョンに追い付いていない場合があるので、なるべく現行のバージョンに対応した本を選ぶ

Photoshopでのワイヤーフレーム制作

【パターン1】
①新規作成→横960px×縦3000pxくらい（増えてOK）、解像度72、RGB、カンバスカラー白、アートボードの☑外す⇒OK
②イメージタブ→カンバスサイズ→幅1280px、カンバスカラー：薄いグレーなどわかりやすい色→OK
③高さが足りなくなったら、カンバスサイズ→基準点を↑に調整して、高さを増やす
④普通に長方形ツールなどで白い部分を増やして作業

【パターン2】こっちのがやりやすいかも
①新規作成→横1280px×縦3000pxくらい、解像度72、RGB、カンバスカラー：薄いグレーなど、アートボードの☑外す⇒OK
②薄いグレー+真ん中白でふたつ長方形ツールで背景作る
③長さが足りなくなったら、カンバスサイズの変更後に②の2つをそれぞれプロパティで高さ変えるだけでOK

Photoshopでのガイド引き方

定規から引っ張ってくるとぴったり希望の位置に置くのが難しい
↓
表示→ガイド→ガイドを新規作成→横線：水平方向、縦線：垂直方向でぴったり作れる

・ガイドが不要になったら、移動ツールでガイドを定規まで入れ込めば消える
・【ctrl+：】でガイドの表示・非表示切り替えができる
・【ctrl+0】で全体表示、【ctrl+1】で100％表示できる

2023年3月9日 コメントする

3月9日（木）－ユーザーインターフェイス基礎③/LP/ワイヤーフレーム

【要参考】
・「デザインの考え方」の教科書⑥参考

LP（ランディングページ）とは？

ランディングページ最適化はコンバージョン最適化、もしくはコンバージョン率最適化と呼ばれるより広範なインターネットマーケティング手法の一つであり、セールスリードや顧客となりうるウェブサイト訪問者の比率を向上させることを目的としている。 

【ワンポイントアドバイス】
未経験でいきなりWebサイトを作るよう業務を指示する制作会社はありません。もし言って来たら疑ってください。個人レベルや担当者がWebサイト制作の知識理解が足りない等で、依頼されるなどの事は逆によくあるかもしれませんのでお気を付けください。
そこで、まずは最初の一歩としてチャレンジするのであればLP（ランディングページ）のような、1ページのページ制作をしっかりと行ってみると良いでしょう。

【参考サイト】

ワイヤーフレームとは？

ワイヤーフレームとは、webページのレイアウトを定める設計図のことです。
（印刷業界ではデザインカンプとも呼ばれる、たたき台のこと）
webサイトの制作現場で聞かないことがない、といえる単語であり、サイト制作において決して欠かせない要素です。単に「ワイヤー」と呼ぶことも多いです。

【ワンポイントアドバイス】
ワイヤーフレームの段階では、お仕事の契約成立に至っていない場合が多いです。
ワイヤーフレームをしっかり作り、見てもらって契約するとなった段階からお仕事となります。
逆を言えば、しっかりとしたワイヤーフレームを作成できるという事は、「仕事を獲得できる力がある」という証明にもなります。お客様のご要望（相手の気持ち）をしっかり理解する事を心掛けて制作をしてみましょう。

【参考サイト】

制作のポイント

・使用ソフトはPhotoshopです。
・サイズはPC基準です。規格は世の中のサイト例を参考にしてみましょう。
・先に必要な文字や情報をテキストで書き出し、手書きでイメージ図を書くと作業しやすいとのこと（先生より）
・Photoshopの作業は、まずは色を入れず、白黒で制作しましょう。（白黒グレーの3色）
・余白を意識し、サイズバランスもWEBサイトの完成形と同じにしましょう。(実務ではpxピクセル単位で仕上げます)
・バナー制作と同じく、
①掲載が必要な内容(情報)を先にしっかりまとめる（5W1H・目的、コーディングの工程も考えながら）
②情報の順番づけ
③レイアウトを考える 手順で制作すると良いでしょう。
そのレイアウトが、HTMLとCSSというルールに変わるだけです。

HTMLの文法、CSSで表現できることを意識してデザインすること。
※特に「デザイン」を作ってから、どう「コーディング」するの？
とならないように、計画的にしっかりとデザインを考えていきましょう。