WEBデザイン
WEBデザインについて
WEBデザインを独学で学ぶためには、根気よく続けることが重要とされています。ただ、根気よく続けることを自身で掲げていても、ぶち当たる壁はもりだくさんで、くじけそうになることもしばしば。
自身は、WEBデザインに出会ってからかれこれ10年以上たちますが、理解できないことも知らない知識もたくさんありますし、壁にも当たりまくり。それだけ深いってことなんです。
見様見真似でいちばん最初に作ったサイトは、今見たら笑ってしまうかもしれませんが、そこが自分の原点であり今日があります。
というか、今もぜんぜん駄目なんですけど。
WEBでは、わからないことをキーワードで検索すると親切に教えてくださるサイトがたくさん見つかります。たくさんありすぎて振り分けに時間はかかりますが、すこしずつ紐解いていくことには時間も根気も使って、そのすべてが確実に自分のためになっていて、ひとつひとつ積み上げていくことで少しずつ完成していくものに喜びを感じることができるから、学びを続けることができます。
WEBデザイン
ポートフォリオ
独学でWEBデザインを学びながらポートフォリオを公開準備中。
ポートフォリオといっても、どのように準備するか調べ中ではありますが、私がずっと作りたかったものをカタチにしたい気持ち一心で..そして納得できるものができたなら、公開してみなさんに配布できたらと夢を描きながら準備を進めています。
下記Organicshopは、デザインからコーディングまでひとつひとつ手間暇かけて作り上げた第一弾の作品です。
お時間あれば、さっと見ていただき、アンケート画面もありますので、答えていただければこれからの励みになりますので、ぜひお願いします。
デスク回りをお気に入りで囲む
話題の韓国アイテムでモチベーションアップ
WEBデザイン便利リンク
自身が実際に利用して口コミともに本当におすすめだけを厳選して載せています。
とにかく、スタートラインに立ちやすくがモットーではじめているので、すべて無料サイトとなります。
※リンククリックで別サイトに飛びます
模写コーディングをひたすら練習する
- Codejump
- WEBサイトをつくるためのデザインカンプと模写コーディングができるフリーサイト。とにかく作って学ぶコーディング学習サイトです。レベルは入門編、初級編、中級編、上級編、応用編、番外編にわたります。コーディングのほかWEBサイトを公開する流れなど、知りたい情報が理解しやすく公開されています。コーディングを繰り返すことにより、WEBサイトの仕組みなどがスキルとして身に付いていきます。自身は3周繰り返し学習しています。
- progateプロゲート
- プログラミングの入門を基礎から学ぶならプロゲートがおすすめ!コーディングしながらすぐに答え合わせをして学習を進めていく方法が、とにかく時短で分かりやすい!つまずいたら何度か戻りながら学習を進めていき、理解を深めていくのがおすすめ。自身はサーバーサイドプログラミングのRubyまで学びました。
- ドットインストール
- まずは無料プランで、興味のある分野の基礎を学び、プログラミングの楽しさを体験。無料プランでは、HTML、 CSSの基本的な書き方、JavaScriptの基本的な文法、Webサイトの簡単な作り方を学ぶことができます。有料プランに加入することで、WEBサイトのデザインやレイアウト、JavaScriptを使ったWebサイトの動的な表現、サーバーサイドプログラミングを学ぶことができます。
- 模写修行
- デザインを元にコーディングに挑戦し、コード解説で答えあわせができるサービス。初級から中級までのレベル毎の教材はフリー。プロレベルになるためのきっかけとなってくれること間違いなし。
テンプレートでWEBサイトづくりをイメージする
- TEMPLATE PARTY
- 1000点以上の商用利用無料のホームページテンプレートの配布。動きのあるおしゃれなテンプレートばかりなので、WEBサイトづくりの参考になります。HTML、CSSなど、基本プラス応用をざっと理解している方であれば、カスタマイズしたりできるのでおすすめ。
- Canva
- Canva(キャンバ)では、名刺やポスター、カレンダーやポストカードなどを作成し印刷できるツール。無料で使える素材やテンプレートが豊富でユーザーは1000万人以上。デザイナーでなくても本格的なバナーの作成、YouTubeやInstagramなどに投稿する動画などの作成も可能。ドラック&ドロップを使って感覚を頼りに作成できるため、独学でもはじめられます。
WEB素材に欠かせない画像の検索
- Freepik
- ベクトル、イラスト、写真、アイコン、動画、PSD、テンプレート、モックアップ、フォントの有料素材、無料素材のダウンロードが可能。文字を入れたり切り抜きなど編集をするためには有料会員登録必須、フリー素材のそのままの利用なら、商用利用可能で、一日10ダウンロードまで可能。フリー素材でも素敵な素材がたくさんあるので私はフルで利用中です。
- 写真AC
- ダウンロード無制限、アップロード5GBまで無料素材の配布サイト。テンプレート素材やプレゼン資料AIなど無料利用でき、テーマ登録やマイテンプレート登録は各5個まで可能。
- Adobe Stock
- 画像10点または、動画1点を無料体験でダウンロードできます。ストック写真、目を奪うグラフィック、 HD ビデオ、 Photoshop のテンプレート等理想的な素材が揃っています。
WEBデザインを学ぶためのツールを選ぶ
迷っているなら、私も使っているHPブランドのPCとプリンタをおすすめします!


WEBデザイナー向けのPCを手早くチェック
私のHPノートパソコンは、ビッグカメラで購入。どの用途でPCを使うのか、したいことに必要なスペックを正確に確認し、定員さんとたくさん相談しながらオーダーメイドしました。よって私のPCにはオフィスソフトが入っていません。wordやExel、PowerPointは日常で使用しないためコストカットしました。デスクトップの大画面だと作業効率が良かったり、おしゃれ王道のAppleを選ぶのもありだと思うので、スペックさえクリアしていれば、ノートでもデスクトップでもWindows、Macでも、とにかく好きなものを選んで、つづけて頑張れることに重点をおいて、日常的に自分のモチベーションを上げていくことが一番大切だと思います。また、プリンタもHPを使っていてPCとの相性抜群で、効率よしです!
こちらの記事もおすすめ
WEBデザイナーを目指すのに役立ちコラム
未経験からWEBデザイナーへ!
- 独学でWebデザインを勉強するための完全ガイド
- Webデザイナーになるために必要な知識やネタをカテゴリにまとめていて、分かりやすいので一読をおすすめします。管理人さん自身、独学でWEBデザイナーを学び、今現在WEBデザイナーのひとりとして働いているので、説得力大。独学でWEBデザイナーになりきちんと稼ぐためのノウハウをわかりやすく解説したコラムが充実。
- 最短2か月!プログラミングで稼ぐ学習ロードマップ
- プログラミング未経験で学習を開始し、Web制作の案件でお金を稼ぐまでの学習ロードマップを紹介しています。これからプログラミング・Web制作のスキルを身につけたい、どうやって学習を進めていけばいいのかわからない、なるべくお金をかけず、独学ではじめたい、おうちで稼ぎたい、これ全部叶えた方が管理人さん自身だから、説得力大。
- 社会人向けオンライン学習コミュニティ
- プログラミングやWEBデザインはもちろん、自分磨きなど、心と身体を整えるコラムや、キャリアアップするためのマーケティング技術、社会課題までに至る、社会人向けのオンライン学習コミュニティ。無料で学べるオンライン授業もとても魅力です。無料登録で9000本以上の動画が7日間見放題です!
WEB制作便利リンク
WEB制作に便利なリンクのおすそわけ
ヴォーグの通信講座
日本ヴォーグの通信講座を実際に受講中





CodeCampに聞く 未経験からWebデザイナーになるためのステップ