【②実制作編】未経験からwebデザイナーとして就職するまでに行った3つのステップ

こんにちは、旅暮らしデザイナーのmaya(@Mayayan6)です。

前回は、「わたしが未経験からwebデザイナーになるために実行した3つのステップ」の第一弾についてお話ししました。

前回の流れで、いいwebサイトってどんなのか?というのと、HTMLやCSSの基礎的な部分がなんとなく理解できた頃だと思います。

次はいよいよサイトを作ってみましょう!

自分で設定したサイトを作ってみよう

少し難しそうですが、順番にやれば大丈夫です。
自分でサイトのコンセプトを考えて一度試しに作ってみましょう!

① サイトを作り始める前に

まず!いきなりデザインを始めるのはNG。
最初に、こんな感じで元になる設定を考えてみましょう。

例)
サイトのテーマ:美容院
ターゲット:20代〜30代の女性
コンセプト:一人の美容師が最初から最後まで担当する、上質でアットホームな空間
ゴール:新規予約の獲得

この設定に沿って、ゴールを達成することができるようなサイトを作り上げていきます!

② サイト設計をしてみよう

さきほどの設定を元にして、ゴール達成のための解決方法を考えていきます。
注目すべき点は、ターゲットやコンセプトから導き出されるデザイン設計ゴール達成までの動線

ゴールである「新規予約の獲得」までの道のりを達成するためには、

・どういったメニューがあるのか
・担当美容師の顔が見えた方がいいかな
・予約のしやすいフォームデザイン
・値段の表示

などなど。こんなことが必要かな?というものがいくつか考えられました!

次にデザインについて。
ターゲットは「20〜30代の女性」で、美容院のイメージが「上質でアットホームな空間」なので

・色合いは落ち着いたベージュやピンクなどの淡い色
・上質さを出すために少し高級感のあるモチーフを入れる
・アットホームさも出したいので、スタッフの写真を入れてみる

パッと思いつくものを挙げてみました。
こんな感じで、自分で作った設定をこんな風にひとつひとつ解決するようにデザインしていくと簡単ですよ^^

③ ここからやっと制作!

これらの手順を踏んで、ようやく本格的な制作に入ります。

基本的流れは、
①サイトマップ・ワイヤーフレームの作成
②webデザイン
③コーディング

といった感じ。

レスポンシブでのコーディングができればなお素晴らしいと思います◎

作品はポートフォリオに載せられる!

実務で作成したものしかポートフォリオに載せられないと思っている方もいらっしゃると思うのですが、実は自分で勉強のために作ったサイトもポートフォリオに載せてOKです。(※自主制作と記載する)

なので、勉強のためにどんどん作ってみましょう!
慣れてきたら知り合いなどに相談して、サイト作って欲しい人を紹介してもらい、実際に実務で作成してみるとさらにスキルアップですね!

大切なことは、課題を解決するために、どんなことを考えながら作ったか覚えておくことです。(先ほどの、②のサイト設計部分)

この色を選んだ意味、このサイトコンテンツにした意味など、一つ一つ考えながら作ってみましょう。

最後に

就職活動する際ポートフォリオは必ず必要です。
未経験だからサイトが作れないなど思わず、こういう自作したサイトを持って行けば大丈夫!
そして、ぜひこのサイトどういう風に考えながら作ったのかを伝えてください。

作品は、最低でも2、3個はあるといいかなと思います。
最初の頃は時間がかかると思いますが、慣れてくると2作品目3作品目は1週間くらいで完成すると思いますよ^^
ぜひ頑張って作ってみてください!

次回はいよいよ第3弾で、就職活動の準備について書きたいと思います。→続く

キーワード

Slowmag.|働きながらスローに旅する「旅暮らし生活」Slowmag.|働きながらスローに旅する「旅暮らし生活」

「Slowmag.」では、仕事をしながら暮らすようにスローペースで旅をする、フリーランスデザイナーMayaの、旅の記録と仕事や日常の様子を発信しています。お問い合わせは下記のリンクから、もしくはSNSで受け付けております。お気軽にどうぞ。