Webデザイン独学者必見!初学者が絶対に押さえておくべきサイト10選

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
スポンサーリンク

【ソフトバンク携帯のりかえでどこよりも高いキャッシュバックを!】    

2050977429_aff593ecc2_m (1)

世の中にはこれからWEBデザイナーを目指す方や自分でホームページをつくって何かを発信したいと考えている方は少なくないはずです。
「とっかかりがわからない!」、「独学方法がわからない」、「ホームページをつくるために必要なものって?」などの悩みもあるはずです。
デザインは眺めるだけでは上手くなりません。
手を動かして、なぜこの配置・色なんだろうと考えて、まずは模写しながら感覚を学んでいきます。
デザインには、正解はないので、まずは自分の好きなデザインを見つけて理解することから始めると良いと思います。

今回はそんなWEBデザインのスキルを独学できるための絶対押さえておくべきサイトを制作ステップに分けてご紹介します!

自分の好きなデザインを見つける

web01

① I/O 3000 | Webデザインギャラリー
いけてるサイト、かっこいいサイト、おしゃれサイトが豊富で参考になるギャラリー系のサイトです。
サイト自体もシンプルでとても見やすく定期的に更新されてますので、つくりたいデザインがきっと見つかるはずです。

web02

②WEBデザイナーの為のデザインギャラリー
業種、色別、地域別、対応デバイスといったカテゴリー分けされておりデザインのインスピレーションの参考になります。

デザインの基本設計

-レイアウトを考える

web03

③Basic Design Note
なにをどのように配置すれば見やすいレイアウトになるかを解説されています。
見た人の視点を意図的に誘導するテクニックについても触れられているので参考になります。

-Webフォントを選ぶ

web04

④Code部
Webデザインにおいてデフォルトで使用できるフォントは、多くはありません。
対して Webフォントは3500種類以上のフォントが使用することができ、多様なWebデザインに対応したフォントを選ぶことができます。
CSSファイルの記述方法の解説もありますのでコーディング初心者の方はまずはコピペで対応いただいけるかと思います。

-カラーを選ぶ

web05

⑤HUE/360
主となる色を決めると合う色を自動的にセレクトしてくれるので、様々な配色パターンを模索できるサービスです。
サイト自体もシンプルでいいです。

web06

⑥ウェブ配色ツールVer2.0
なんとサイト全ての色を自動的に決めてくれる。もちろんオシャレに。さらにプレビューを見ながら、色相差を指定したり、もっと明るく、 もっと暗く、背景は白で、など簡単にカスタマイズ試すことができるジェネレーターです。

-画像素材を選ぶ

web07

⑦プロカメラマンのフリー写真素材 無料画像素材プロ・フォト
プロカメラマンが撮影した著作権フリーの写真素材集サイトです。
かなり自由に使える条件なので、無料素材でもつかえるものが沢山あります。
プロのカメラマンが自分の所在をあきらかにして登録しているので、クオリティも安心です。

web08

⑧フリー写真素材 Futta.NET
30,000枚ほどのフリー写真素材が著作権フリー画像に相当し「商用利用、壁紙、Web、印刷、動画、背景」等に利用することができます。
人物素材よりかは風景素材が豊富なサイトになってます。

コーディングの進め方

web09

⑨WeblogEndoutakae
0からHTML・CSSを独学される方はオススメです。
基礎的なサイト構成の説明からタグ名称や要素の説明にも触れており、
おさらいとして実践サンプルもダウンロードできますので大分学べます。

web10

⑩CODEPREP
プログラミングをオンラインで書きながら覚えることができる学習サービスです。
HTML、CSS、JavaScript、Rubyの学習が可能です。
アプリ開発がゴールで、応用編が多数用意されています。

まとめ

以上、WEBデザインのスキルを独学できる記事をまとめてみました。
今回ご紹介した押さえておくべきサイトはどちらかというと基礎から学ばれる方には参考になるかと思います。
WEBスキルを上げて色んなホームページの作り方を楽しんでみてください!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る