【初心者向け】webデザイン・コーディング練習方法まとめ【無料】

Webデザイナーを目指して勉強に励んでいる皆さん。基礎知識はつけたものの実践的な力の付け方がわからず、困っている方も多いのではないでしょうか。このページでは、初心者に向けた無料の学習方法をご紹介していきます。

Web制作に必要なスキルのチェックから

Webデザイナーの業務は大きく分けて、

• Webサイトの見た目を作る「デザイン」
• Webブラウザで表示、動かすための「コーディング」

の２つに分類されます。
それぞれに必要な基礎スキルを確認しましょう。

Webデザインに必要な基礎的なスキル

Photoshop【必須】…デザインの構築や写真の加工する際に使用する

Illustrator…ロゴなどを作るときに役立つ

xd…ワイヤーフレームやアプリのデザインに特化したデザインツールとして最近注目を集めている

コーディングに必要な基礎的なスキル

HTML【必須】…Webページの文書構造をコンピュータに指示するための言語

CSS【必須】…HTMLで作られた文書構造にデザインを加えるための言語

java script…サイトに動きを出すためのもの

練習に進もう！

基礎スキルの準備はOKでしょうか？
（必須と書いていないスキルは、今回できなくても大丈夫です）

Webデザインの練習方法

Webデザインの練習は、大きく分けてこの２つです。

• 模写
• 分析

【デザイン練習①】模写をしてデザイン力をUPしよう

模写の目的はプロのWebデザインを観察して技術を吸収し、自分のデザインの引き出しを増やすことです。
初心者の方がいきなりサイト全体を模写するのは難しいので、バナーの模写から始めてみましょう。

【バナー模写の仕方】

1. お手本となるバナーを探し、スクリーンショットを撮る
2. Photoshopでお手本を表示し、隣に自分でバナーの模写を作る（30分～1時間が目安）
3. 完成したら、模写を透けさせてお手本と重ね、違いを確認する。修正する。

↑新規作成画面でアートボードにチェックを入れると、１つの画面に複数のバナーを表示できますよ！

↑こんな感じでお手本と模写を並べて作業していきましょう。

意識すべき点

• お手本のバナーのどこが良いと感じたか、デザインをしっかり観察すること
• プロとの違いを細かく分析すること（特にフォントと余白の使い方）
• 制作時間を意識すること

バナーなら短時間で作れるので気軽に続けやすいのもポイントです。毎日続けることで、デザインを考える癖がつき、デザインに対する感度upにもつながります。
慣れてきたら目標時間を短くしたり、サイト全体の模写をしてみると良いです。
また、模写をして学んだことは自分のデザインにどんどん取り込んでアウトプットしていきましょう。

バナーデザインの参考サイト（デザイン性の高いバナー集です！お手本にお役立てください）
banner library http://design-library.jp/
バナー広場https://banner-hiroba.com/

【デザイン練習②】分析をしてデザインを言語化しよう

デザインを言語化し、なぜそのように作ったのか説明できるようになりましょう！感覚的な表現ではなく相手が理解しやすい言語に落とし込むことで、プレゼンが通りやすくなり、信頼度もアップします。

分析の方法としては、
対象のサイトの
・使用した色と比率
・フォントの種類、大きさ、太さ
・線の太さ
・ページ構成
・導線設計
など、要素をまとめてみると良いかと思います。
いくつか分析してみると、言語化の能力がつくだけでなく、
Webデザインの平均値や流行をつかむこともできます。

コーディングの練習方法

コーディングの練習方法も大きく分けて２つです。
①写経
②模写
このほかにオンライン学習サイトを使用する手段もありますが基礎学習寄りのため、実践力をつけるという意味では写経・模写のほうが効果的です。

【コーディング練習①】コーディングで写経してみよう

初心者の場合、まずは「写経」から始めましょう。
自分がかっこいいと思うサイトをGoogle Chromeの検証ツールを使って検証し、コードを写していきます。（コピペはだめですよ！）

Google Chromeの検証ツールの使い方

ギャラリーサイトからお手本のサイトを探すこともできます。
muuuuu.org
https://muuuuu.org/

写経の効果
・サイトの骨組みやコーディングのパターンを体感的に学べる
・今まで触れたことのないコードに触れることができる
写経のポイント
・一気にHTMLを組んでからCSSに入るより、HTMLとCSSを少しずつ交互に写していくと効率よく理解できます。
・よく使うタグはスニペットとして登録したり、自分オリジナルのWebテンプレートを作り、作業の効率化を図りましょう。
・プロのとても良いコードに出会ったときは、保存してストックしましょう。後に役立つことがあります。

【コーディング練習②】コーディングで模写をしてみよう

お手本のWebサイトと同じものを作ることを目標に、自力でコーディングをする「模写」をしてみましょう。
【模写コーディングの仕方】
・お手本にするサイトを決める
・画像などの素材をダウンロード
・構成図を手書きする(ラフで大丈夫です)
・お手本のコードを見ずに、自力でコーディング
・Google Chromeの検証ツール等を使って、お手本と自分のサイトのコードを比べてみる
です。
作成途中の検証ツールの使用は本当にわからない時のみ可にするなど、ルールを設けると良いかと思います。
お手本にするのは自分が好きなサイトでもいいですが、
サイトによっては難しすぎたりあまり良い練習にならないこともあるので、まずは模写サイトでの練習をおすすめします。
模写サイトは解説があるのでわかりやすく、制作したサイトはポートフォリオに使用可能なものが多いのもありがたいです。

オススメの模写練習サイト①

Codestep
https://code-step.com/

初心者編から上級編までレベル別の練習問題が用意されています。基礎知識のみで作れるランディングページ(LP)もあるので、初心者も気軽に練習できるサイトです。レスポンシブにも対応しています。
レイアウト構成の考え方についての解説もあるので、サイト制作への理解が深まりやすいです。デザインカンプをもとにしたコーディング練習ができるので、より実践的な力をつけることができます。

オススメの模写練習サイト②

【無料】デザインカンプからのコーディング練習教材-入門編
https://note.com/necopon/n/n8b12d044e49a
【無料】デザインカンプからのコーディング練習教材-初級編
https://note.com/necopon/n/n2f9129511c46

サンプルサイトの練習用デザインカンプが用意されています。
レスポンシブのコーディングを、デスクトップファーストとモバイルファーストのどちらも練習することができます。
デザインカンプはxdデータでの配布です。xdは無料ですので、まだ使ったことがない方はダウンロードしましょう！いま注目のツールなので触れておいて損はないかと思います。
https://www.adobe.com/jp/products/xd.html

模写におすすめの機能

Webデザイン/コーディングにおすすめの拡張機能とサイトをご紹介します。
今後の学習や仕事にお役立てください。
●Chrome拡張機能
・フォントの種類を検出できる「What Font」
・サイト上の画像を一括保存できる「Image Downloader」
・定規として使える「Ruler」
・サイトに使用している色をチェックできる「ColorPick Eyedropper」
・ウェブページ全体をスクリーンショット できる「FireShot」
●Googleが提供するWebフォントのサービス「Google Fonts」
●無料で使えるwebアイコン「Font Awesome」
●簡単なダミー画像作成ツール「placehold」

まとめ

今回はwebデザインの基礎知識を得た方にむけた、練習方法の紹介でした。デザインもコーディングも継続がとても重要です。技術向上を目指してがんばっていきましょう！