こんにちは。ホクト(@tomadip)です。
現在、バンコクのノマドエンジニア育成講座「iSara」に第五期生として参加しています。
[memo title=”MEMO”]iSaraとは
プログラミング知識の習得とともに「個人経営におけるマインドを学ぶ」ためのプログラム。現役フリーランスとして活躍する方々が講師となり、フリーランスとして生きていくために必要なコトを3週間で学習します。[/memo]
今回は、講座10日目で学んだことをまとめました。
・プログラミング学習を継続していて、これから実際に稼いでいきたい方
・フリーランスとしての生き方に関心のある方
はぜひ参考にしていただければと思います！
DAY10.「コーダーなら知っておきたいデザイン知識」について
デザインを深く学習するかは人それぞれですが、最低限知っておきたいポイントを抑えておくことで、コーダーとしての仕事の幅が広がります。クラウドソーシングでも、デザイン対応できると案件数がグッと増えるので、駆け出しにとって学習するメリットは大きいと言えます。
1：デザインとアートの違いは？
[memo title=”MEMO”]
デザイン
相手の意図に沿って、機能をつける(相手が中心)
アート
自分の意図に沿って、美を想像・表現する(自分が中心)
[/memo]
デザインはアートと違い、ある程度「ロジカル」に組み立てることが可能なので、「センスがないから出来ない」とあきらめる必要はありません。
とは言っても、どうすれば初心者がデザイン力を向上させることができるのでしょうか？
まず知っておくべき大事な考え方は、「デザインの4大原則」です。これさえ守れば、初心者でも最低限のデザインは作成することが可能になります。
2：デザイン4大原則とは？
「近接」「整列」「強弱」「反復」の4 点を言います。
①近接
同じような情報を近づけて、違う情報を遠くする
②整列
縦横のラインを揃える(見えない線を引いて揃えるイメージ)
③強弱
目立たせたい要素を大きくして、そうでないものは小さくする
④反復
要素を繰り返す
[sanko href=”https://webdesign-trends.net/entry/7810″ title=”脱初心者！「デザインの4つの基本原則」を押さえて基礎を固めよう” site=”Web Design Trends”]
参考記事を見ていただければわかる通り、これが出来る出来ないで大きな差があります。実案件のデザインカンプにも微妙なズレはあるので、この4大原則を意識して自分でも微修正できると、コーダーとして付加価値がつきそうですね。
3：Webデザイン作成の流れ
①クライアントにヒアリング
デザインの方向性を決めるために、
・目的は何か
・どんなイメージにしたいのか
最低限、上記2点をヒアリングします。
「デザイン ヒアリングシート」で検索すると、より項目が細分化されたフォーマットが見つかるので、そちらを利用するのも良いですね。
②参考URLを提示する
ヒアリングした内容をもとに、クライアントの希望に合った参考サイトを提示します。これによって、お互いに制作のイメージをすり合わせることができます。経験の少ない初心者にとっては、特に重要な工程なので、欠かさないようにしましょう。
③ワイヤーフレームを作成する
ワイヤーフレームとは「webページのレイアウトを定める設計図」のことです。実際のデザインやコーディングなどの作業に入る前段階で作成し、完成イメージを「見える化」する目的で作成します。
[sanko href=”https://nandemo-nobiru.com/web-5695″ title=”ワイヤーフレームとは何か？webサイト制作に重要なページ設計図を理解しよう！” site=”なんでものびるWEB”]
④デザインカンプを作成する
デザインカンプとは、前述のワイヤーフレームをもとにして作成される「デザインの完成見本」のことです。色やフォントなど細かい部分まで作り込み、ここでGOサインが出てはじめて、HTMLやCSSによる構築作業に入っていくことができます。
[sanko href=”https://nandemo-nobiru.com/web-6206″ title=”デザインの完成見本図、「デザインカンプ」とは？役割と作り方を知ろう！” site=”なんでものびるWEB”]
4：初心者は「パクる」ことから始めよう
画像編集ソフトの使い方や学習方法については、別途調べてもらうとして、最後に、初心者でも「それなりのデザイン」を作成するための方法をお伝えします。
それは「似たサイトを分析して、要素を取り入れる」ことです。
同業種、業界のサイトデザインは、結構似通っていることが多いので、良いと思ったレイアウトなどを真似して作成してみましょう。複数のサイトをスクリーンショットで保存して並べてみると、どういったデザインが好まれているかが、大まかに把握できます。
あくまで「参考にする」のが目的ですので、文章や画像をそのまま流用しないようにお気をつけください。
まとめ
小中高の12年間で、美術・技術系の成績が5段階中2か3だった僕にとっては、デザインは少しハードルが高いように思っていました。
ただ、基本的な要素を抑えれば、とびきり優れていなくてもそれなりには作れるとわかって、今はやる気に満ちあふれています。笑
参考までに、本日のちづみさん(@098ra0209)の講座で作ったデザインカンプを載せておきます。
とってもわかりやすい解説を聞きながらではありますが、自分でこうしたものを作れるようになる、というのはめちゃくちゃ嬉しいです。笑
まずは「コーダーにしてはデザインの知識がある」と思ってもらえるまで、レベルを引き上げられるように勉強しようと思います。
めちゃくちゃ有益なちづみさんのブログ記事一覧(デザインカテゴリ)
[sanko href=”https://zukulog098r.com/category/web/design/” title=”「デザイン」カテゴリ記事一覧” site=”ずくろぐ”]
引き続き明日以降も、学んだことをシェアしていきます。
それでは。
