ラムネットコラム

コラム・ラムネット

【WEBデザイナー】
WEBデザイナーに必要な基本的スキルとは

「WEBデザイナーになりたいけれど何から始めればいいの?」「どんなことを身につける必要があるの?」など、やってみたいけれどどうすれば良いのかわからないという方は珍しくないと思います。
今回はWEBサイトを制作する上で実際に使用する「Adobe illustrator」や「Adobe photoshop」などグラフィックソフトについてお話ししたいと思います。

WEBデザイナーとは

WEBデザイナーとは、クライアントの想いを具現化する仕事です。なぜWEBサイトを作るのか“目標”を明確にし、それに合ったものを制作しなければなりません。
ユーザーの視線を誘導するにはどのようなデザイン配置が良いのか、視認性を高めるにはどの色を使うのが適当か、使い勝手が良く何度も訪れたくなるWEBサイトとはどのようなものなのか、そういった心理的戦略をデザインに落とし込むことがWEBデザイナーには求められます。

デザインにある程度の答えはあるものの限界はなく、自由度が高いためクリエイティブな仕事と言われるのかもしれませんね。

WEBサイト制作に使用するグラフィックソフト

WEBサイトをデザインするのに使う基本的なグラフィックソフトをご紹介します。

  • ・Adobe illustrator
  • ・Adobe photoshop
  • ・Adobe XD

よく使用するソフトはこの3つです。制作会社やクライアントによっては上記のものと違うソフトを使用していることもありますが、基本的にはこの3つを使いこなせれば問題はないと思います。

Adobe illustrator

「Adobe illustrator(アドビ イラストレーター)」“イラレ”と略されて呼ばれることが多いですね。ベクター画像と呼ばれる図形を作れ、文字や図形を正確に設置する機能にも優れています。最近アップデートされ、ブラウザ上でのデザインの共有も可能になりました。
企業のロゴやキャラクター、チラシ、製品パッケージ、ファッションなどのデザインツールとしても広く使われています。

最初は簡単な図形から作り始め、とにかく様々な機能を使ってみるといいかもしれません。サイト制作ではコンセプトによってイラストレーターの中でも使用する機能が異なってきます。例えば、ポップなサイトと和風で落ち着いたサイトでは同じ文字でも加工の種類や方法は変わります。

イラレの使い方に慣れることを目標にするのであれば、既存のデザインを真似て作ってみるのがいいかもしれません。とにかく実際にあらゆる機能や効果に触れ、数をこなすことでショートカットキーを覚えることもでき、作業効率もアップします。

Adobe photoshop

「Adobe photoshop(アドビ フォトショップ)」は“フォトショ”と略されて呼ばれます。主に写真画像の明るさや色味、傾きなどの補正などに向いているソフトです。画像の合成や切り抜きなどによく使用します。
図形の作成やパスを使ったオブジェクトの描画もできますが、自由な描画やアレンジは「Adobe illustrator」の方が豊富です。WEBデザインにおいては、写真のリサイズやレタッチのほか、パーツやデザインカンプの制作に用いられます。

クライアントにWEBサイトに使う写真を用意してもらうケースの場合、スマートフォンで撮影したものを使うことがあります。現代のスマートフォンのカメラ機能は向上し手軽ではあるものの、撮影条件が悪くきれいに撮れていなかったり、より魅力的な写真に仕上げたいということも多々あります。そういった時フォトショップは重宝します。

さらに、写真はユーザーの目に留まりやすいという効果が見込めるため、クライアントの強みが伝わる写真を掲載するためにもフォトショップの使い方をひと通り理解しておくことはマストです。

Adobe XD

「Adobe XD(アドビ エックスディー)ワイヤーフレーム・デザインカンプ・プロトタイプ作成に必要な機能がまとめられた、UI/UXデザインツールです。
描画機能やパーツを使ってデザインを作ることも可能です。簡単なアニメーションも付けられるため、より実物に近い表示を制作できます。

XDの最大の魅力は共有のしやすさです。そのため最近ではXDの使用は主流になっています。ブラウザ上でデザインを共有できるため、以前までのファイルを送付し修正点を聞き、別ファイルでまた送るという面倒なことは行う必要がなくなりました。社内だけでなくクライアントともコミュニケーションが取りやすくなるため作業効率も上がります。さらにレスポンシブ機能もあるため、あらゆるデバイスで確認できます。

WEBデザイナーもコーディングする前に実際の表示を確認できるため、UI/UXデザインを考えるためには習得しておくべきスキルの一つだと思います。

まとめ

上記で紹介した「Adobe illustrator」「Adobe photoshop」「Adobe XD」はどれも無料で始められるものです。何事も使ってみないと分かりません。さらに、Adobe製品はアップデートも定期的に行われ、機能がどんどん進化していきます。WEBデザイナーに興味のある方はとりあえず一度触れてみてください。

私たちRAM net(ラムネット)はWEBデザイナーとエンジニアの分業を取り入れています。それぞれが専門性を高めるためです。分業制を成立させるためにも、グラフィックソフトの共有機能はとても重要で進行具合を左右します。コーディングは自身ではなく他社に依頼したいという方は、特に共有機能は理解しておいて損はないと思います。

分業制のメリット・デメリットについて具体的に知りたい方はこちらのコラムをご覧ください。


ラムネットの公式ホームページはこちらです↓