【ポートフォリオに載せよう！】企業サイトの作り方
ポートフォリオに載せるサイトを作りたい。
具体的にどんなサイトを作ればいいの？
と方向性についてお悩みの方も多いかもしれません。
わたしは二週間ほど前に架空の弁護士サイトを作りました。
まったく未知の業界のWEBサイトです。
が、業界ごとのカラーやセオリーなどを知れば、
ヒアリングをしなくてもそれっぽいサイトを作れます。
ぜひ作品作りの参考にしてください。
①同じ業界のホームページをググる。
弁護士事務所のホームページを作りたい場合、
「法律事務所」、「弁護士事務所」などのキーワードをグーグル検索にかけます。
見つけた弁護士事務所のサイトをどんどんブックマーク。
見比べて、どんな名前のメニューがあるのか、どんな用語が使われているのかなどを調べます。
サイト構成についても要チェックです。
作りたい業界の参考サイトが少ないこともあります。
その場合、似ている業界で検索を掛けてみると良いです。
例えば……
- ファッション業界→美容業界
- 居酒屋→ラーメン屋
- 銀行業界→航空業界（どちらともボタンが多いサイトなので、ボタンデザインを真似できます）
WEBサイトをまとめたサイトもありますので、
作りたいテイストから似たサイトを拾ってくるのも良いと思います
②モデルのサイトが見つかったら、スクショして画像化
WEBサイトのままですと、開く手間があったり、動いちゃったりするので、画像化しましょう。
現在ほとんどのサイトがレスポンシブ化されています。
パソコン用（1200pxくらい）
タブレット用（780pxくらい）
モバイル用（450pxくらい）
と三種類のデザインを撮っておきます。
グーグルでは検証ツールからスクリーンショットが取れます。
あるいは、GYAZOを使うと簡単です。
Gyazo
Gyazoを使えばスクリーンキャプチャーを簡単に撮影・保存・共有できます。
撮影と同時にアップロードとURLのコピーが完了し、すぐに共有できます。
③会社名や画像を替えて、ホームページの構成通りにカンプを作成。
そのサイトのテイストを保ったまま、XDやphotoshopでカンプを作ります。
良いサイトはレスポンシブデザインの切り替えも素晴らしく、
実際に作ってみることで仕組みが分かったりします。
④カンプデザインを元にサイトを実装！
photoshopのナイフツールで切り取った要素を組んでいきます。
この時、コードそのものは真似しない方がいいです。
かっこいいデザインには独自の動きが実装されていることが多いので、
未経験者に難しいプログラムで組まれているかもしれません。
今まで習ったことをアピールするチャンスですので、html、css、javascriptなど持ちうるスキルで実装しましょう。
ポートフォリオに載せる作品は似たようなデザインをたくさん作るより、
系統の違う２～３のサイトを作りこんだ方が良いと言われています。
クライアントからお仕事を受けた気持ちで、丁寧に作っていきましょう！
未経験からWEBデザイナーになるための最速ステップ
職業訓練校に通うと、秒速でWEB業界に入れます。
html、cssに慣れたらwordpressでもWEBサイトを作ってみましょう。
当ブログでは初心者の目線に立って、wordpressサイトの作り方も紹介しています。