こんにちは、みい(@w_michan69)です。
未経験から独学でWebデザイン・Web制作の学習をはじめて、Webデザイナーとして活動するためには、自分のポートフォリオサイトを制作する必要があります。
ポートフォリオサイトとは、自分の制作物や実績を公開しお客様や制作会社さんの営業に活用するためのものです。
未経験のうちは、実際の案件の制作実績がないため、自己制作で架空サイトを制作してポートフォリオに掲載します。
スクールの課題や模写を制作物として公開している人もいますが、自分がデザインして作ったものを載せる方が良いので、まずは１つ架空サイトを制作することをオススメします。
架空サイトのテーマを決める
参考サイトを探す
サイトの構成を決める
デザインの制作
コーディング
架空サイトを公開する
わたしが作った架空サイトはこちら。
化粧品メーカーの架空サイトを制作しました。
【デザイン・コーディング】
◾︎20代前半〜30代後半の女性
◾︎普段デパコスや高級な化粧品を好んで使う人向け
◾︎冬・クリスマスを意識制作期間:5日
Photoshop/HTML/CSS/JavaScript pic.twitter.com/HCGDpCXLA4— みい｜Webデザイナー (@w_michan69) October 22, 2021
架空サイトのテーマを決める
何の業種のサイトをつくるのか
まずは、どんなサイトを作るか考えます。
企業のコーポレートサイト、店舗や施設を紹介するサイト…など。
自分が作りたいサイトがあるなら、それがいいです。
わたしはクラウドワークス
などで募集されている案件の中から選んで作成したりもしていました。
実際の案件でよく見かけたのは
- 美容クリニックなどの医療関係のホームページ
- Web系のオンラインスクール
- 福祉関係の施設のホームページ
- 建築関係の会社のホームページ
- フィットネススクールのホームページ
などでした。
作りたいサイトがなかなか決まらない場合は参考にしてみてください。
ターゲット層を決める
作る架空サイトのテーマを決めたら、そのサイトを見て商品を購入したり、サービスを利用したりするであろうターゲット層を想定します。
ペルソナ設定といわれたりもします。
わたしはそこまで細かく設定を考えたわけではありませんが、おおまかなイメージはするようにしています。
テーマ：デパコスや高級な化粧品メーカー
ターゲット層：20代前半〜30代後半の女性
- 美容に関する意識が高く高級志向
- 季節感は冬・クリスマスを意識
参考サイトを探す
自分でゼロからデザインを作り始める前に、参考になるサイトをいくつか探します。
今回わたしは化粧品メーカーのサイトを制作するので、化粧品メーカーのサイトを探しました。
今回わたしは19歳から愛用しているDiorの化粧品のサイトを参考に制作しました♡
サイトの構成を考える
わたしの場合はノートに手書きで構成を書きます。
ワイヤーフレームといったりします。
あまりキレイに書こうとせずにおおざっぱにほぼ殴り書きみたいな感じです…。
今回は文字をグラデーションにしたくて調べたCSSをメモしてます。
デザインの制作
デザインカンプとよばれるものを作成します。
わたしはPhotoshopを使って制作しています。
今回はこんなかんじで制作しました。
画像やアイコンを探してきて、文章もサンプルではなくなんとなくで入れてみます。
コーディング
自分で制作したデザインカンプを見ながらHTML/CSSを使ってコーディングしていきます。
レスポンシブ対応もしておきます。
JavaScriptやjQueryを使うホームページでよく使われるような機能も架空サイト制作で練習しておくと、案件で出てきた時に安心です。
今回は
- ハンバーガーメニュー
- スムーススクロール
をJavaScriptとjQueryを使って実装しました。
架空サイトを公開する
完成した架空サイトを公開します。
公開の仕方がわからない方は下記の記事を参考に公開してみてください。
架空サイトをいくつも作成して、ドメインをいくつも取得するのは大変なので、サブドメインを取得して公開するのがオススメです。
今回わたしが作った架空サイトはわたしのポートフォリオのサブドメインで公開しました。
https://demosite001.mieedesign.com/
まとめ
いかがだったでしょうか。
フリーランスWebデザイナーとして活動していくために、自己制作やポートフォリオは営業のために必ず必要になってくると思うので、たくさん作って公開しましょう♡
