学習中のカメ
学び続けるウサギ
学習中のカメ
目次
Webデザインの学習をしよう
こんにちは！mokuです。
プログラミングの勉強はどうでしょうか？HTMLとCSSはマークアップ言語なのでカンタンだと思っていても奥が深く難しいですよね。
私はマイペースにプログラミングの学習を今も続けています。
見栄えが良くユーザーが使いやすいWebサイトを作るには、Webサイトの配色を整えて統一感をだしたり、画像を良い感じに補正したりなどしてデザインもすることが必要になってきます。
Webコーダーだけじゃなく、Webデザイナーを目指している方はWebデザインの学習も始めて頑張っていきましょう。
まずはWebデザインを学習する上で必要なアプリをご紹介していきたいと思います。
デザインの学習に必要なアプリ（ソフト）
デザインの学習に必要なアプリ（ソフト）としてはAdobe（アドビ）のPhotoshop（フォトショップ）というものがあり色調・サイズなど画像加工が事細かに調整できるので、デザインを本格的に学習していきたい方は必須のアプリです。
Adobe（アドビ）以外にもFigma（フィグマ）やCanva（キャンバ）などWebブラウザ上で使える便利なデザインツールはありますが、Adobe社のアプリが使えることでデザインの仕事の幅が広がるので使えるようになっておきたいですね。
FigmaとAdobeが使えると幅広く対応しやすくて良いです。
私は、Webデザインを学習するならまずはAdobeのソフト（アプリ）だと思い、昔買ったAdobeのCS5を使って動画などで勉強していました。
買い切り版のAdobe CS5
しかし、サポートが徐々に終了したり、教材などの内容も最新バージョンのCCでしかできないこともありましたので限界を感じていました。
そして、Adobe CCの最新の機能を見るととても便利な機能が増えていて使いたくなり、すぐにAdobe CC（Adobe Creative Cloud）を契約しました。
実際にAdobe CCを使ってみて、アプリが抜群に使いやすくなっていて感動しましたね。
Adobeは元々買い切りタイプだったのにサブスクリプションに変わってしまったので正直「うわ〜、高いな〜、、」と思っていたのですが、Adobe CCを一回使ってしまうと「もうこれは契約続行必須だな」と強く感じるようになりました笑
元々Illustrator（イラストレーター）やPhotoshop（フォトショップ）は操作するのが難しい印象でしたが、最新のAdobe CCは機能も増えていて操作も以前よりは使いやすくなっています。
Illustrator（イラストレーター）はロゴのデザインなどをするときに重宝するアプリになります。
IllustratorやPhotoshopを単体で契約しても良いですが、さまざまなアプリがセットになっているAdobe CCのコンプリートプランの方が断然お得で便利ですよ。
動画編集にも興味がある方なら鉄板アプリのAdobeのPremiere Pro（プレミア プロ）もAdobe CCの中に付属していますのでオススメです。
AdobeのPremiere ProとPhotoshopとの連携もしやすいので色々と使いやすいですね。
Adobe CC（アドビ クリエイティブクラウド）のコンプリートプランをお得に契約する方法は【Creative Cloud】Adobe CCを安く手に入れる方法【サブスク】の記事を参考にしてみてください。
Adobe CCコンプリートプランを安く使う５つの方法【Creative Cloud】
デザインの４大原則
Webデザインは、UI / UXデザインとしてWebサイトの見た目の美しさ、使いやすさ、わかりやすさなどが大切です。
デザインの４大原則（近接・整列・強弱・反復）を学習していくと、さまざまなWebサイトなどで４大原則が使われていたりしてとても参考になりますね。
デザインの４大原則
1.近接（Proximity）
2.整列（Alignment）
3.反復（Repetition）
4.コントラスト（Contrast）
一見シンプルに見えるものでも「整列」されていることで「見えない線」があり、デザインの計算がされていたりするので面白いですね。
飲食店のメニュー表を見てもランチやドリンクなどそれぞれ「近接」して直感的で分かりやすいな〜とか思ったりするようになりました。
箇条書きが見やすいのも確かに点や文字間の余白が「反復」されているし「コントラスト」で重要な部分を分かりやすくしているなど４大原則に基づいて計算されていますね。
デザインの学習をしていると、日常生活でよく見かける看板や、吊革広告などのデザインが気になるようになると思うので面白いです。
お店のロゴも全て理念が込められていると思うと、町中の看板を見てどういった意味を込めて作ったのかが気になるようになりました。
自分が気にいったWebサイトなどを見て「なんで良いと思ったのか」を深掘りして考えて言語化すると勉強になります。
例えば、
「なんか良い感じだな〜」→
「おしゃれ・文字が見やすい・スマホで操作しやすい」→
「イメージに合っていて直感でわかりやすく色が見やすい・目立たせたい箇所に太めのゴシック体を使用している・余白調整のバランスが良い」→
「テーマカラー（ベースカラー70%・メインカラー25%・アクセントカラー5%）は何色なんだろう？・何のゴシック体なんだろう？」→
「ベースカラーが白系で文字は黒系だから見やすい・メインカラーがイメージカラー・アクセントで反対色使うと調和して引き締まって見える」・「ヒラギノ角ゴシックは見やすい」
など細かく具体的に分解していくイメージです。
そしてバランスを考えてそれぞれの良いと思った要素を取り入れ、配置していくと段々いい感じのデザインになっていきます。
バランスが一番難しいと思うのですが、なんでもバランスが大事ですよね。
例えるなら音楽も、モデルも物も花も「素材 + バランス」だと感じております。
良い曲なんだけど曲が長すぎたり、ギターだけカッコよかったり、美しい花が徒長していたりとバランスがあんまりだともったいないですね。
バランスがとれていてまとまりがあると良くなるのでデザインと同じです。
デザインについて独学で学習したい場合は、まず下記のような本がグラフィック・Web問わずに実際にデザインを考える上で役立ち網羅的に基礎を学習できるので読んでみることをオススメします。
まとめ：デザインを学習してWebサイトなどを作ろう！
今の時代、デザインをするための、デザインツールなどを動画で学習することができるので本当にありがたいですよね。
昔は分厚い本をみてアドビのIllustrator・Photoshop・Fireworks・Dreamweaverの勉強をしていて「スクールに通わずに動画とかあれば良いのにな・・」と思っていました。
動画だと音声もあるので直感的にわかりやすく覚えやすい印象です。本と動画を交互に学習すると覚えやすいかもしれません。
まずはAdobeのPhotoshopなどのデザインアプリを使いこなせるようになって、Webサイトなどを自分でデザインできるように頑張っていきましょう。
本格的にWebデザイナーとしての学習を、スクールやオンライン完結のスクールで体系的に学びたい方は、老舗のデジハリがオススメなのでデジハリオンラインスクールでWebデザイナーになろうの記事を参考にしてみてください。
【副業】デジハリオンラインスクールでWebデザイナーになろう【フリーランス】
デザインに興味のある方に少しでもお役に立てれば幸いです。
