世の中にはこれからWEBデザイナーを目指す方や自分でホームページをつくって何かを発信したいと考えている方は少なくないはずです。
「とっかかりがわからない！」、「独学方法がわからない」、「ホームページをつくるために必要なものって？」などの悩みもあるはずです。
デザインは眺めるだけでは上手くなりません。
手を動かして、なぜこの配置・色なんだろうと考えて、まずは模写しながら感覚を学んでいきます。
デザインには、正解はないので、まずは自分の好きなデザインを見つけて理解することから始めると良いと思います。
今回はそんなWEBデザインのスキルを独学できるための絶対押さえておくべきサイトを制作ステップに分けてご紹介します！
自分の好きなデザインを見つける
① I/O 3000 | Webデザインギャラリー
いけてるサイト、かっこいいサイト、おしゃれサイトが豊富で参考になるギャラリー系のサイトです。
サイト自体もシンプルでとても見やすく定期的に更新されてますので、つくりたいデザインがきっと見つかるはずです。
②WEBデザイナーの為のデザインギャラリー
業種、色別、地域別、対応デバイスといったカテゴリー分けされておりデザインのインスピレーションの参考になります。
デザインの基本設計
-レイアウトを考える
③Basic Design Note
なにをどのように配置すれば見やすいレイアウトになるかを解説されています。
見た人の視点を意図的に誘導するテクニックについても触れられているので参考になります。
-Webフォントを選ぶ
④Code部
Webデザインにおいてデフォルトで使用できるフォントは、多くはありません。
対して Webフォントは3500種類以上のフォントが使用することができ、多様なWebデザインに対応したフォントを選ぶことができます。
CSSファイルの記述方法の解説もありますのでコーディング初心者の方はまずはコピペで対応いただいけるかと思います。
-カラーを選ぶ
⑤HUE/360
主となる色を決めると合う色を自動的にセレクトしてくれるので、様々な配色パターンを模索できるサービスです。
サイト自体もシンプルでいいです。
⑥ウェブ配色ツールVer2.0
なんとサイト全ての色を自動的に決めてくれる。もちろんオシャレに。さらにプレビューを見ながら、色相差を指定したり、もっと明るく、 もっと暗く、背景は白で、など簡単にカスタマイズ試すことができるジェネレーターです。
-画像素材を選ぶ
⑦プロカメラマンのフリー写真素材 無料画像素材プロ・フォト
プロカメラマンが撮影した著作権フリーの写真素材集サイトです。
かなり自由に使える条件なので、無料素材でもつかえるものが沢山あります。
プロのカメラマンが自分の所在をあきらかにして登録しているので、クオリティも安心です。
⑧フリー写真素材 Futta.NET
30,000枚ほどのフリー写真素材が著作権フリー画像に相当し「商用利用、壁紙、Web、印刷、動画、背景」等に利用することができます。
人物素材よりかは風景素材が豊富なサイトになってます。
コーディングの進め方
⑨WeblogEndoutakae
0からHTML・CSSを独学される方はオススメです。
基礎的なサイト構成の説明からタグ名称や要素の説明にも触れており、
おさらいとして実践サンプルもダウンロードできますので大分学べます。
⑩CODEPREP
プログラミングをオンラインで書きながら覚えることができる学習サービスです。
HTML、CSS、JavaScript、Rubyの学習が可能です。
アプリ開発がゴールで、応用編が多数用意されています。
まとめ
以上、WEBデザインのスキルを独学できる記事をまとめてみました。
今回ご紹介した押さえておくべきサイトはどちらかというと基礎から学ばれる方には参考になるかと思います。
WEBスキルを上げて色んなホームページの作り方を楽しんでみてください！
販売店比較早見表
|
店舗名 |
詳細 |
|
『おとくケータイ 乗り換えキャッシュバック最高額を保証してくれます |
|
|
|
|
ソフトバンクショップ, auショップ, ドコモショップ |
|
』
