【未経験必見】ポートフォリオに掲載する架空サイトの作り方

デザイン
記事内に広告が含まれています。

ポートフォリオで一番重要視されるのが、制作実績です。
どんなデザインができるのか、どれぐらいのコーディングレベルなのかを制作したWebサイトから見ることができます。
ただ実務未経験だと制作実績がなく、載せるものがないですよね。
そこで架空の企業やお店のサイトを制作して、制作実績として掲載していきます。
ではどのような流れで架空のサイトを考えて、制作していけばいいのか手順を紹介していきます。

架空サイトを制作しながら並行して、Web制作会社の求人を見ておくのもありです。未経験者のWeb制作会社の求人の見つけ方

架空サイトの作り方手順

  1. 業種を考える
  2. ペルソナを考える
  3. デザイン・コーディング

上記が簡単な流れです。
さらに詳しい説明は各項目でしていきます。

業種を考える

初めにどんなサイトを制作するのかを考えます。
どの業種のコーポレートサイトなのか、お店のサイトなのかと言った感じです。

しかし、幅が広すぎて業種を選ぶのに悩みますよね。
最初は自分の好きな業種(分野)を選べば良いと思います。
例えば、インテリアが好きなら家具メーカーのコーポレートサイトとかですかね。

もしカフェのサイトならこんなカフェがあれば良いなみたいな感じで考えていくと良いです。
僕はカフェ×プラネタリウムをコンセプトにしたサイトや魚が好きなので、架空の水族館のサイトを制作していました。

僕が実際に作った架空のカフェのサイトです。
参考にしてみて下さい。

ここでどんな業種のサイトを制作するのかをざっと決めてしまいましょう。

ペルソナを考える

制作していくサイトの業種が決まれば、次に「ペルソナ」を考えます。
「ペルソナ」とは簡単に言うと、Webサイトを見てもらうユーザー像を設定するということです。
ユーザー目線で考え、こういう人にサイトを見てもらいたいなという風に考えていきます。

よく似ている言葉として「ターゲット」という言葉があります。
この辺りはネットで調べると詳しく解説してくれているサイトもあるので、この機会に違いなども勉強しておくと良いです。

ペルソナを設定することにより、後のデザインの段階でフォントやデザイン、配色などを決める時に考えやすくなります。

デザイン・コーディング

業種とペルソナが決まれば、いよいよデザインを考えていきます。
かと言っていきなりデザインを考えるのはとても悩むところですよね。
そこでヒントになるのが同業種のサイトを沢山調べるということです。

例えば、架空の水族館のサイトを考えていれば水族館のサイトを調べまくります。
自分が良いなと思ったサイトを何個かピックアップして、それを参考にデザインを考えていきます。
もちろんそのまま真似をするのはダメですよ。(笑)

良いところの組み合わせをして、新しくデザインを考えていきます。
レイアウトを変えたり、配色を変えたりとかですね。
あくまでも参考程度に留めます。

同業種のサイトを沢山調べているとここのサイトとここのサイト似ているなとか気づけたりします。
どちらかが参考にしたのかなとか。(笑)
わりとデザインってそんな感じだったりするんですよね。

この本も参考にしていました。業種別やパーツごとに解説してくれているので、デザインアイデアの参考になります。実務でも見返すことがあるので、一冊持っておいてもいいかもです。

そして、PhotoshopやXDでデザインカンプを制作します。
あとはパソコンとスマホで見れるようにレスポンシブ対応されたコーディングをすれば完成です。

サイトの構成としては、下層ページも含めた全ページを作るのが理想ですが、一つのサイトをがっつり制作すると慣れていない内は1ヶ月以上も時間がかかったりします。(笑)
そのため、下層ページも含めたサイトは二つぐらいで良いと思います。

あとは制作実績の水増しでトップページだけのサイトやファーストビューのみのサイトを制作します。
僕は下層ページを含めたサイト2つとトップページのファーストビューを6つほど掲載して、乗り切りました。

時間をあまりかけられない人はトップページだけでも、デザインにこだわって面接で熱く解説できるようにしておきましょう!

まとめ

初めて架空のサイトを作るのはデザインの引き出しが少ないこともあり、デザインを考えるのが難しく、進めるのに難航することも多いと思います。

しかし、デザインが好きなら乗り越えられると思うので、楽しみながら制作に取り組みましょう。徐々にデザインが固まってくるとコーディングするのも楽しみになります!こだわって制作したサイトは面接でも必ずアピールポイントになるので頑張りましょう!

架空サイトの作り方が分かれば制作と並行して、Web制作会社の求人も見ておきましょう。

コメント