名古屋で営業しているフリーランスのweb・ホームページ制作WWW(ダブダブダブ)HomeホームNewsお知らせFlow制作の流れPrice料金ServiceできることWorks制作実績Company会社概要Contactお問い合わせNewsWWWからのお客様へのお知らせをご案内します。友人から連絡があり、「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.インデントに気をつけようデザインの事ではないですが、コーディングの際はインデントに注意しましょう。インデントとはずばり字下げのことです。言葉より実際に見てみた方が分かりやすいですね。</nav></body></html>このようにスペースを与えかつ、『>』の形になるように、見やすいコーディングを意識しましょう。<!-コメントアウト—>をつけると後々わかりやすいです。まとめいかがでしたでしょうか?今回紹介したポイントの他にもweb製作時に必要なデザインのルール的なものはあります。4つのポイントはデザインの正解ではありませんが、これも一つの考え方ですので、頭に入れておいて損はないと思います。未経験の方はまず、マージンとジャンプ率を意識しデザインして、コーディングの際はインデントを意識して制作してはいかがでしょうか。当たり前ですが、Webデザイナー・Webクリエイターという仕事は採用後からが一番大変です。ホームページ制作をしているダブダブダブのwebデザイナーです。コンテンツSEOだったり、wordpressの組み込みをしています。記事が参考になったらシェアして頂けると幸いです。Entry1本当は教えたくない!フリーランスwebデザイナーの仕事の取り方2Webデザイナーの私がMacを選ぶ6つの理由3釣り好きはチェック。FieldsとPHPの条件分岐をつかって値がないときは表示させない。9月23日(金)研修の為お休み致します。Reserved.info@wwwzz.jp。