投稿者: Webデザインに必要なもの
Webデザインには専用の高いソフトやツールが必要だと思う方もいらっしゃるでしょうが、実はネット環境とテキストエディタがあれば作れます。
テキストエディタは様々ありますが、私が使っているのは「SublimeText3」です。
「Atom」や「Dreamweaver」も使用したことはありますが、SublimeTextはとにかく動作が軽いです。
プラグインでコーディング補助してくれる機能やテーマカラーを変えたり、使用者が多いので非常にカスタマイズが豊富でおすすめです。
画像やイラストを作成するには
AdobeのPhotoshopやIllustratorは使いやすく画像やイラストを作成したり加工するのに役立ちますが有料です。
最近ではSketchなども人気になってきましたが、フリーで使用できる「Gimp」というツールもあるのでお金をかけたくない場合はこちらを使ってみてもいいと思います。
ワイヤーフレームを作ろう
必要なものもそろい、あとはWebデザインを作っていきますが、すぐにデザインするのでなく、まずサイトデザインの設計をしましょう。
設計といっても難しく考えることはなく、入れるコンテンツやメニューなどをまとめ、どこに何を置くか、下書きみたいな感じでおおまかにワイヤーフレームを作成します。
手書きでもいいですが、たいていの場合社内やクライアントにも見せることがあるので、ツールやソフトを使ったほうがいいでしょう。
先述した「Sketch」というソフトがありますが、これは現時点ではMac専用なのでWindowsの方は使用できません。
他に有名どころでは「Cacoo」などがありますが私のおすすめは「Moqups」というサイトのツールです。
英語サイトですがフリープランもあり、直感的に操作できてネットがつながればどこでも使用できるので個人的にSketchよりいいと思います。
デザイン制作手順
ワイヤーフレームが完成したら実際にWebデザインに取り掛かります。
作る手順はそれぞれ好みや、やりやすい方法でもいいと思いますが、個人的に効率がいいと思うやり方を紹介します。
トーン＆マナーの決定
↓
ページ全体のレイアウトを決定
↓
ヘッダー作成
↓
メインコンテンツ作成
↓
フッター作成
↓
パーツ細部の調整
トーン＆マナー
トーン＆マナーとは俗にいうトンマナと呼ばれるものです。簡単に言えば全体のイメージ、世界観になります。
例えば医療のサイトだったら誠実さや堅実さをアピールしますが、YouTuberの動画が入ってたら不安になりますよね。
アピールしたいポイントやイメージを色や形で一貫性をもたせることをいいます。
ページ全体のレイアウトを決定
上で決めたトンマナを元にイメージに沿った最適なレイアウトを考えます。
2カラムなのか3カラムなのかタイル型などおおまかに決めていきます。
ヘッダー作成
ヘッダーとはページの上部にあるロゴや説明などをのせる部分です。
ユーザー目線として一番最初に目に入るところでもあるので、最初に作っておいたほうがいいでしょう。
メインコンテンツ作成
メインコンテンツとはサイトのメインとなる内容を表示する部分です。
記事や画像などになります。
ユーザーにとって最も重要なエリアなので、ファーストビューに収まるか見やすいかなども考慮して作りましょう。
フッター作成
フッターとはサイトページ下部にあるコピーライトなどを表示する部分です。
他はお問い合わせやプライバシーポリシー、サイトマップなども入れることが多いです。
パーツ細部の調整
諸々デザインが出来てきたら全体を見てトンマナから外れていないか、サイズや形なども注意し見ていきます。
フォントサイズやパーツの大きさなど細部の調整が終わってデザイン完了となります。
第2回まとめ 手順にそってデザインする
サイトのデザインはまず全体的なイメージを決めてから取り組んだほうがいいです。
そうすれば後々になって作成したパーツを作り変える等ということが少なくなります。
また、ユーザーが最初に目にする部分から始めることも重要です。
