駆け出しのコーダーが最低限覚えておきたいデザインツールの使い方

こんばんは、Yukiです。

今回は「Web制作などを中心にやっているコーダーです。Web制作をやっていく上でデザインツールの知識が必要と聞いたんですが、具体的にどんなレベルまでできたらいいんですか?学習の手順も合わせて知りたいです。」

こんな方向けの内容となっています。

【本記事の内容】

  • 必要なデザインツール
  • 最低限覚えるべきデザインツールの使い方

ちなみに筆者はWeb制作などを中心に行っているフリーランスのコーダーで今回紹介するデザインツールを案件ではよく使用しています。

では早速本題に行きましょう。

スポンサードサーチ

フォトショップ、イラストレーター、XDを持つべし

フォトショップ、イラストレーターを持つべし見出し画像

まず最初に、Web制作を中心に行っていくエンジニアに必要なデザインツールはフォトショップイラストレーター、XDです。

なぜかというと、単純なHTML&CSSのコーディング案件を受ける場合、ほとんどが送られてくるフォトショップやイラストレーターで作成されたデザインデータから素材の画像を切り取って保存(書き出し)して、利用していくことになります。

なので、デザインツール(フォトショップ、イラストレーター、XD)を持っていて、基本的な操作をマスターしている必要があるのです。

フォトショップ、イラストレーター、XDの購入方法は【学生・教職員】であればAdobe公式の【コンプリートプラン・月額1980円】で買うのが良いかと思います。

社会人の場合は、セール中であれば「ヒューマンアカデミー講座たのまな」で購入するのが最も安く買えるのですが、時期によってセールがやっていないことがあるため最安値が変わってしまうので、社会人の方で購入したいと考えている方は「ヒューマンアカデミー講座たのまな」「Adobe公式」「Amazon」の三つの中で最安値を調べて購入するのが一番確実に安く買えます。

フォトショ・イラレ・XDで最低限必要な知識

フォトショ・イラレで最低限必要な知識見出し画像

最低限覚えないといけないことは本当に少ないので、要領の良い方なら3日くらいでマスターできるかと思います。

では最低限必要な知識を紹介します

  • 画像の書き出し(イラレ・フォトショ・XD)
  • CSSの取得(イラレ・フォトショ・XD)
  • 長さの取得(イラレ・フォトショ・XD)
  • 選択の仕方(イラレ・フォトショ)
  • アートボードの理解(フォトショ)
  • レイヤーの理解(イラレ・フォトショ)
  • レイヤーマスクの理解(フォトショ)

画像の書き出し

これは(イラレ・フォトショ・XD)全てでできるようにしましょう。おそらくこれが一番苦労すると思います。

そもそも「書き出し」ってなんやねん?って感じの方もいると思うので、簡単に説明すると「ファイル形式を変えて画像を保存する」ってことですね。

実際どうゆう場面で「書き出し」が必要かというと先ほども説明した通り、クラウドソーシングや制作会社からの案件で、psdデータやaiデータ(フォトショやイラレでしか編集できないデータ)でデザインが送られてくることがあり、素材の画像を自分で書き出さないといけないという場面で必要です。

*一応、イラレやフォトショじゃなくてもpsdデータやaiデータを扱うことができる無料のツールは存在しますが、仕様が英語だったり、使い方がわかりづらいのでイラレ・フォトショを使うことをお勧めします。

CSSの取得

これは送られてきたデザインから、イラレかフォトショ、XDのいづれかを使ってフォントの種類や色などのCSSをする取得するということです。

これができないと色やフォントの種類を取得するのに死ぬほど時間がかかるので、必ずマスターしましょう。

長さの取得

イラレやフォトショの機能にある、定規を使って要素の長さを測るために使用するというものです。

選択の仕方

フォトショやイラレにはデザインの中の要素を選択する方法がいくつかあるのですが、選択の方法はいくつか知っておかないと、先ほど書いた画像の書き出しの仕方などがよく分からなくなるので基本的な選択方法は覚えておきましょう。

アートボードの理解

基本操作の理解をすっ飛ばして、必要なところことだけググるというやり方をしていると、説明で「アートボードが〜」とかが出てくると何を言ってるのか全く理解できなくなるので、フォトショの基本操作の理解として、アートボードの仕組みや使い方は理解しておきましょう。

レイヤーの理解

レイヤーというのはフォトショやイラレを使っているとよく出てくる知識なんですが、これもアートボードと同じ理由で基本操作の理解として、使い方や仕組みを理解しておきましょう。

レイヤーマスク

レイヤーマスクも先ほどのアートボードやレイヤーと同じ理由で、基本操作の理解として、使い方や仕組みを理解しておきましょう。

スポンサードサーチ

デザインツールの使い方をどうやって勉強するのか?

デザインツールの使い方をどうやって勉強するのか?見出し画像

これまでにフロントエンドエンジニアが最低限覚えておきたいデザインツールの使い方を解説したので、実際にどうやって勉強していくのが良いのかを解説します。

Adobe公式のサイトや、必要に応じググって調べて理解しましょう的な風潮があるのですが、ネットで調べながらやるとなると細切れの情報にしかアクセスできず、体系だった情報にアクセスできないので初学者にとってはちょっとハードルが高いかなという気がします。(実際自分はググってもイラレやフォトショの使い方がよくわからなかった)

*XDの使い方は簡単なので、Adobe公式サイトで十分理解できます。

なのでフォトショ、イラレに関しては本で基本的なことを勉強してから、必要に応じてググって解決するようにすることをお勧めします。

ちなみに僕のオススメの本はこれです。

【逆引き手帖】という形式なので必要な情報にピンポイントでアクセスできるメリットがあります。

ちなみにXDの操作方法に関しては下記の記事で詳しく解説しています。

Adobe XDデータからのコーディング方法を徹底解説【爆速コーディングへの第一歩!】

 

フォトショ、イラレに関してはまず上記で紹介した本で冒頭にある基本操作に目を通し、先ほどあげた7つの最低限の知識を学習しましょう!

では今回は以上です。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。