この記事を書いた人
未経験Webデザイナーが制作会社に採用されるためのデザインの4つのポイント
WEB制作
友人から連絡があり、「webデザイナーの職業訓練に通ったんだけど、制作会社にwebデザイナーとして採用されるには、どうしたらいいのか」と聞かれました。私は、アドバイスができるほどの立場ではありませんが、少しポイントを教えたところ見事に、大手案件を請け負う制作会社の採用が決まりました。
未経験から採用されるためのポイントを、個人的な意見ですが、まとめてみました。
また、いろいろなサイトで未経験Webデザイナーのための面接や履歴書の書き方などを教えているサイトはよく見るので、今回は提出するデザインの見せ方についてまとめてみました。未経験のwebデザイナーを目指している方は、参考になれば幸いです。
1.ポートフォリオは必ずサーバーにあげる。
私は、職業訓練のことは詳しくわかりませんが、学校でポートフォリオサイトを作ると思います。
その際自分でドメインとサーバーをレンタルして、必ずサーバーにあげて、サイトを見せることが前提になります。
zipファイルにhtml・cssなどを、まとめてメールで送るのではなく、サーバーにあげましょう。
また、紙に印刷してみせるのではなく、必ずサーバーにあげましょう。
サーバーにあげることで、サイトが見やすく印象がよくなります。
ポートフォリオサイトにグライフィクデザインでも良いので、webサイトを含め最低3つぐらい実績が、あれば大体のスキル伝わると思います。
2.マージンのルールを決めよう。
デザインを作成する際は、マージンに気をつけましょう。
私もまだまだですが、未経験の方のデザインは、ダサいのは当たり前です。その中で、マージンを意識すれば、採用者にデザインのルールが、分かっていると思ってもらえます。
マージンとは
マージンとは なんぞやとうい方、マージンとは余白の事です。
とりあえず余白をとればいい！というわけではありません。 シンプルなデザインこそ、きちんとした基礎が必要になってきます。
今回は、マージンについて分かりやすい様に、ユニクロのサイトを参考にご説明します。
ヘッダー部分
ヘッダー部分を見てみるとナビゲーションとバナーとメインビジュアルのマージンが揃っており、まとまりのある印象になっています。2015.8月のユニクロのサイトでは、マージンのルールを15pxを基準として、マージンを取っています。
メインヴィジュアルのスライドショー
画像を見てもらうと解りやすいと思いますが、ここでも、スライダーのサムネイルのマージンの感覚を、このサイトのルールにより、横・縦のマージンの感覚を15pxとしています。
そして、ポイントとして、今まで15pxでマージンをとっていましたが、今までのコンテンツと次のコンテンツの境目に、2倍の30pxでマージンをとっています。
コンテンツバナー部分
ホームのメインコンテンツバナー部分も同様に横・縦も15pxでマージンをとっていますが、次のコンテンツに移る際は30pxのマージンをとっています。
このように次のコンテンツと、わかるように、マージンを余分にとるだけで、見栄えがよくなり、ユーザーに見やすいサイトとなります。意識をすれば簡単だと思うので、デザイン作成時はマージンを意識してみましょう。
マージンについてのまとめ
マージンを意識するだけで、サイトのクオリティーが上がります。webデザイナーになりたいと思っている方は、意識してみてください。
ただ、あえてマージンを飛び出すことで、インパクトのあるコンテンツにもなるので、適材適所でお使いください。
サイト作成時にマージンのルールを自分の中で決める事で、締まりのあるサイトになりますね。
3.フォントのジャンプ率
フォントのジャンプ率とは？
ジャンプ率とは、見出しテキストとテキストの大きさの比率を言います。
案外、何となくで決めがちです。
見出しは、飛ばし読みされても記事の理解度を高めるために重要な要素となり、サイト全体の見た目や雰囲気にも大きく関わってきます。
ちなみにこのブログのジャンプ率
タイトル見出しは50px、見出しは30px、小見出しは24px、テキストは16pxにしています。16pxを基準にしているので1として1：1.5：1.9：3.1としてます。サイトよってジャンプ率は異なりますが、大体平均1：2：3.5みたいに最初は2倍次は1.75倍みたいなサイトが多い印象があります。
ジャンプ率で印象を変えよう
ジャンプ率のサイズの変化はwebサイトへの見た目にも大きく影響がありメリハリ感を演出してくれます。
ジャンプ率が大きい程、ダイナミック、大衆的、行動的なイメージになり。
逆にジャンプ率が小さいと落ち着いて見え、高級感や大人っぽいイメージになります。
ジャンプ率まとめ
新聞、雑誌、webサイトにはジャンプ率が存在します。ジャンプ率がもたらす印象を把握したうえで、web制作時に意識をしましょう。
4.インデントに気をつけよう
デザインの事ではないですが、コーディングの際はインデントに注意しましょう。
インデントとはずばり字下げのことです。言葉より実際に見てみた方が分かりやすいですね。
<!DOCTYPE html> <html> <head> <!--meta--> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--/meta--> <title>インデント</title> <!--css--> <link rel="stylesheet" href=""> <!--/css--> </head> <body> <header> <h1>インデント</h1> </header> <nav> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </body> </html>
このようにスペースを与えかつ、『>』の形になるように、見やすいコーディングを意識しましょう。
また<!-コメントアウト—>をつけると後々わかりやすいです。
まとめ
いかがでしたでしょうか？
今回紹介したポイントの他にもweb製作時に必要なデザインのルール的なものはあります。4つのポイントはデザインの正解ではありませんが、これも一つの考え方ですので、頭に入れておいて損はないと思います。
未経験の方はまず、マージンとジャンプ率を意識しデザインして、コーディングの際はインデントを意識して制作してはいかがでしょうか。
当たり前ですが、Webデザイナー・Webクリエイターという仕事は採用後からが一番大変です。
頑張りましょう。