【Illustrator】Webデザインの学習をしよう【Photoshop】

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】

UI / UXデザイン

見栄えがよくて使いやすいWebサイトを目指すUI／UXというデザインがあります。

最初に聞いた時は何かのアプリ名かと思いました。(笑)

UI／UXは、どちらもUser(Webサイトを使用する人)目線で意識することですね。

Webサイトを作る側はなんか難しそうに感じてきますね、、笑

そういった意味でも好みや使い勝手は十人十色なので同じくそれぞれの価値観に寄り添って、UI/UXはユーザー目線（お客様目線）で開発を行なっていくというデザインです。

やたらファーストビューの映像が複雑でローディングに時間がかかったり「どこにメニューボタンがあるの？」などわかりにくいWebサイトもよくあるので目的に沿ったWebサイトをデザインしたいですね。

Web制作の中でもコーディングだけじゃなくWebデザインのお仕事もしたい方は、クライアントもそうですが、その先のお客様目線で「良いな」と思われるWebサイトを目指していきたいところです。

価値観は千差万別で諸行無常なのでそこが難しいところだとは思いますが…笑

とはいえ、万人の方が「良いな」と思うデザインにはいくつか法則があったりします。

デザインの４大原則

Webデザインは、UI / UXデザインとしてWebサイトの見た目の美しさ、使いやすさ、わかりやすさなどが大切です。

それには、デザインの４大原則が大事になってきます。

デザインの原則を使うと、なんかごちゃごちゃしたWebサイトでもスーパーのチラシでもなんでも意外と見やすかったりします。

デザインの４大原則（近接・整列・強弱・反復）を学習していくと、さまざまなWebサイトなどで４大原則が使われていたりしてとても参考になりますね。

一見シンプルに見えるものでも「整列」されていることで「見えない線」があり、デザインの計算がされていたりするので面白いですね。

飲食店のメニュー表を見てもランチやドリンクなどそれぞれ「近接」して直感的で分かりやすいな〜とか思ったりするようになりました。

箇条書きが見やすいのも確かに点や文字間の余白が「反復」されているし「コントラスト」で重要な部分を分かりやすくしているなど４大原則に基づいて計算されていますね。

デザインの学習をしていると、日常生活でよく見かける看板や、吊革広告などのデザインが気になるようになると思うので面白いです。

お店のロゴも全て理念が込められていると思うと、町中の看板を見てどういった意味を込めて作ったのかが気になるようになりました。

自分が気にいったWebサイトなどを見て「なんで良いと思ったのか」を深掘りして考えて言語化すると勉強になります。

例えば、

など細かく具体的に分解していくイメージです。

そしてバランスを考えてそれぞれの良いと思った要素を取り入れ、配置していくと段々いい感じのデザインになっていきます。

バランスが一番難しいと思うのですが、なんでもバランスが大事ですよね。

例えるなら音楽も、モデルも物も花も「素材 + バランス」だと感じております。

良い曲なんだけど曲が長すぎたり、ギターだけカッコよかったり、ズボンの丈が少し長かったり、美しい花が徒長していたりとバランスがあんまりだともったいないですね。

バランスがとれていてまとまりがあると良くなるのでデザインと同じです。

デザインについて独学で学習したい場合は、まず下記のような本がグラフィック・Web問わずに実際にデザインを考える上で役立ち網羅的に基礎を学習できるので一度読んでみることをオススメします。

まとめ：デザインを学習してWebサイトなどを作ろう！

今の時代、デザインをするために必要なデザインツールなどを動画で学習することができるので本当にありがたいですよね。

もちろんただツールを使えるようになるだけじゃなく、良いデザインを見たり考えたりすることが大事です。

昔はやたら分厚い本を見ながらアドビのIllustrator・Photoshop・Fireworks（現在はありません）・Dreamweaverの勉強をしていて「スクールに通わずに動画とかあれば効率良いのにな….」と思っていました。

動画だと音声もあるので直感的にわかりやすく覚えやすい印象です。本と動画を交互に学習すると覚えやすいかもしれません。

まずはAdobeのPhotoshopなどのデザインアプリを使いこなせるようになって、Webサイトなどを自分でデザインできるように頑張っていきましょう。

本格的にWebデザイナーとしての学習を、スクールやオンライン完結のスクールで体系的に学びたい方は、老舗のデジハリがオススメなのでデジハリオンラインスクールでWebデザイナーになろうの記事を参考にしてみてください。

【副業】デジハリオンラインスクールでWebデザイナーになろう【フリーランス】

デザインに興味のある方に少しでもお役に立てれば幸いです。