yuki駆け出しのコーダーが最低限覚えておきたいデザインツールの使い方ツイートシェアはてブLINEPocketこんばんは、Yukiです。今回は「Web制作などを中心にやっているコーダーです。Web制作をやっていく上でデザインツールの知識が必要と聞いたんですが、具体的にどんなレベルまでできたらいいんですか?学習の手順も合わせて知りたいです。」こんな方向けの内容となっています。必要なデザインツール最低限覚えるべきデザインツールの使い方では早速本題に行きましょう。スポンサードサーチフォトショップ、イラストレーター、XDを持つべしまず最初に、Web制作を中心に行っていくエンジニアに必要なデザインツールはフォトショップ、イラストレーター、XDです。いうと、単純なHTML&CSSのコーディング案件を受ける場合、ほとんどが送られてくるフォトショップやイラストレーターで作成されたデザインデータから素材の画像を切り取って保存(書き出し)して、利用していくことになります。デザインツール(フォトショップ、イラストレーター、XD)を持っていて、基本的な操作をマスターしている必要があるのです。フォトショップ、イラストレーター、XDの購入方法は【学生・教職員】であればAdobe公式の【コンプリートプラン・月額1980円】で買うのが良いかと思います。社会人の場合は、セール中であれば「ヒューマンアカデミー講座たのまな」で購入するのが最も安く買えるのですが、時期によってセールがやっていないことがあるため最安値が変わってしまうので、社会人の方で購入したいと考えている方は「ヒューマンアカデミー講座たのまな」「Adobe公式」「Amazon」の三つの中で最安値を調べて購入するのが一番確実に安く買えます。最低限覚えないといけないことは本当に少ないので、要領の良い方なら3日くらいでマスターできるかと思います。最低限必要な知識を紹介します。画像の書き出し(イラレ・フォトショ・XD)CSSの取得(イラレ・フォトショ・XD)長さの取得(イラレ・フォトショ・XD)選択の仕方(イラレ・フォトショ)アートボードの理解(フォトショ)レイヤーの理解(イラレ・フォトショ)レイヤーマスクの理解(フォトショ)画像の書き出しこれは(イラレ・フォトショ・XD)全てでできるようにしましょう。これが一番苦労すると思います。そもそも「書き出し」ってなんやねん?って感じの方もいると思うので、簡単に説明すると「ファイル形式を変えて画像を保存する」ってことですね。実際どうゆう場面で「書き出し」が必要かというと先ほども説明した通り、クラウドソーシングや制作会社からの案件で、psdデータやaiデータ(フォトショやイラレでしか編集できないデータ)でデザインが送られてくることがあり、素材の画像を自分で書き出さないといけないという場面で必要です。*一応、イラレやフォトショじゃなくてもpsdデータやaiデータを扱うことができる無料のツールは存在しますが、仕様が英語だったり、使い方がわかりづらいのでイラレ・フォトショを使うことをお勧めします。CSSの取得これは送られてきたデザインから、イラレかフォトショ、XDのいづれかを使ってフォントの種類や色などのCSSをする取得するということです。これができないと色やフォントの種類を取得するのに死ぬほど時間がかかるので、必ずマスターしましょう。長さの取得イラレやフォトショの機能にある、定規を使って要素の長さを測るために使用するというものです。選択の仕方フォトショやイラレにはデザインの中の要素を選択する方法がいくつかあるのですが、選択の方法はいくつか知っておかないと、先ほど書いた画像の書き出しの仕方などがよく分からなくなるので基本的な選択方法は覚えておきましょう。基本操作の理解をすっ飛ばして、必要なところことだけググるというやり方をしていると、説明で「アートボードが〜」とかが出てくると何を言ってるのか全く理解できなくなるので、フォトショの基本操作の理解として、アートボードの仕組みや使い方は理解しておきましょう。レイヤーの理解レイヤーというのはフォトショやイラレを使っているとよく出てくる知識なんですが、これもアートボードと同じ理由で基本操作の理解として、使い方や仕組みを理解しておきましょう。レイヤーマスクレイヤーマスクも先ほどのアートボードやレイヤーと同じ理由で、基本操作の理解として、使い方や仕組みを理解しておきましょう。スポンサードサーチデザインツールの使い方をどうやって勉強するのか?これまでにフロントエンドエンジニアが最低限覚えておきたいデザインツールの使い方を解説したので、実際にどうやって勉強していくのが良いのかを解説します。Adobe公式のサイトや、必要に応じググって調べて理解しましょう的な風潮があるのですが、ネットで調べながらやるとなると細切れの情報にしかアクセスできず、体系だった情報にアクセスできないので初学者にとってはちょっとハードルが高いかなという気がします。(実際自分はググってもイラレやフォトショの使い方がよくわからなかった)*XDの使い方は簡単なので、Adobe公式サイトで十分理解できます。フォトショ、イラレに関しては本で基本的なことを勉強してから、必要に応じてググって解決するようにすることをお勧めします。ちなみに僕のオススメの本はこれです。