ソフトの選び方&作業の流れイラストITデザインWeb2019年7月2日Webフロントエンドエンジニアのコンコンタです。デザインも勉強中で、当ブログはデザインから全て僕が作っています。ポートフォリオサイトなり、ブログなり、自分のサイトを作ってみたいと考えている人は結構いるはず。そんな方の多くはHTMLなどのIT技術に意識を奪われがちですが、まず大切なのはデザインです。この記事では、Webデザインの基礎、Webデザインで使うソフトなどについて解説していきます。ソフトの具体的な操作方法については触れませんので、それらは適時公式サイトのマニュアルなどで調べてください。作ってみて自分を知ろうデザイン制作って必要なの?そもそもどんな作業なのWeb制作を全く知らない方は、このデザイン制作という工程自体をスキップしてしまいがちです。デザイン制作とは、デザイン用ソフトを使用してWebサイトの見た目だけを先に作ってしまう作業のことです。実際にブラウザでみる見た目と完全に同じものをまずは絵で作ろうという話ですね見た目はそっくりですが、あくまで絵なのでボタンなどは押しても動きません。HTMLを書いちゃダメ?絵を最初に作り、そのあとに実際に動くサイトをHTMLで作る。一見するとデザイン制作は必要無いように思えてきます。同じものを2回作るのに等しいですから。人から依頼を受けて制作をする場合は必須です。デザインを制作してクライアントに見てもらい、要望をもらって反映させる必要があります。絵だけを作る方がかかる時間は少ないので、手直しを要求された場合に対応しやすいです。会社でWeb制作する場合はデザインとコーディングで担当する人が分かれる場合もあり、分業の観点からもデザイン制作とコーディングで工程を分けるのが有効です。10ページ以上のサイトだとか、規模が大きい場合にはコーディングをするときにデザインとして完成像全体が見えているとパーツを使い回したりして効率よく作ることができます。個人でもデザイン制作は必要?個人制作におけるデザイン制作は必要なんでしょうか。ワガママなクライアントもいませんし、自作なら分業を考える必要もありません。ぶっつけ本番でサイトを作って絶対にデザインの失敗があり得ないのなら確かにデザイン制作は必要ないです。自主制作でも試行錯誤は付き物です。初心者なら尚更HTMLから作ってしまった場合、気に入らない箇所が出てきても手直しが非常に難しく時間がかかります。結局、デザインを作ってからコーディングに入った方が時間の短縮になることがほとんどです。個人制作のサイトは完成後に機能を付け加えたりすることがあります。なったとき、デザインデータが残っていればそこにボタンを付け足したりして新しいデザインを簡単に試すことができます。サイトのコードしか残っていない状態だと、既存の機能を壊さないようにヒヤヒヤしつつ追加デザインを試さなくてはなりません。他人から手直しを依頼されることはなくても、自分自身というワガママなクライアントの要望に応えるためにはデザインを用意しておいた方が良いのです。XDのどれかでしょう。会社などでは歴史が長く汎用性の高いPhotoshopが多いと思います。やって選ぶか個人的な意見として、以下に各ソフトの長短をまとめました。Photoshop一番汎用性が高いソフトレイアウト制作は勿論のこと、写真加工からアイコン制作まで可能Adobe製品のライセンスは1製品のみor全製品利用可能のどちらかなので、1製品ライセンスの場合は汎用性が高いPhotoshopを選ぶのが良いでしょう。欠点は機能が多すぎてボタン数が多すぎる上、動作が重くなること。複数ページのレイアウトを1つのファイルで作ると凄まじい重さになります。Illustratorアイコンなどの色数が少ないシンプルなデータを扱うのが得意なソフトパス関連の機能がPhotoshopよりも使いやすく、余計な機能がない分レイアウト作りはこちらの方が個人的にはやりやすい。欠点は写真加工機能がないので、写真を使ったデザインを考えるなら写真加工ソフトが別に必要になること。Adobeの全ソフトライセンスを買ってPhotoshopと使い分けるのがオススメXDWebデザインに特化した比較的新しいソフト写真加工機能がなく、パス関連の機能もIllustratorよりも弱いですがレイアウト作成の機能が非常に使いやすいです。動作が軽くて1つのファイルに複数ページのレイアウトとスマホ用デザインを一緒に作っても軽快に動作します。欠点としては、写真加工やアイコン制作に他ソフトがあった方が良いこと新しいソフトなのでWeb上に情報が少ないことなどがあります。Web制作会社でもまだ使っているところが少ないので上2つのソフトに比べて仕事に繋がりにくかったりします。(そのうち移り変わっていくと思いますが)僕のオススメはXDAdobe社的にもWebデザインはXD!といった形で推しているので、今後PhotoshopやIllustratorがWebデザイン用に使いやすく進化することは無いと思います。将来性的にも、個人制作はXDで練習していくのが良いでしょう。機能としてはリピートグリッドが非常に使いやすくて強力ポートフォリオサイトの作品のサムネイルをずらりと並べた感じの繰り返しレイアウトを簡単に試してみることができます。他にもいろいろ便利機能がありますが、細かい話なので別の記事で大体の流れ構想を練ろうここではサックリ書きますが、一番大切な作業です。デザインソフトを起動する前にどんなサイトを作りたいのかは明確に言語化しておきましょう。紙にレイアウトを簡単に書いておくとデザイン制作で詰まりにくくなります。当サイト「ぎゃらりー」のラフ部品を作ろうアイコン、写真の切り抜きなど必要な部品は先に作るのがオススメです。部品を全て作り、最後にそれを組み合わせてレイアウトを作った方が作業を行ったり来たりせずに済みます。どんな部品が必要なのかを最初に把握しておくためにも構想をよく練っておくことが大切なわけです。Illustratorでレイアウトを作っている場合でも、アイコンなどは別ファイルに分けて作るとあとで別の制作物でも部品として使いやすくて便利です。Studioで手描きです。PC用レイアウトを組み立てようどちらからやってもいいんですが、僕はPC用レイアウトから先に作ります。大きくて情報量が多い方から先に作った方が部品を網羅できるからです。横幅は1920pxでキャンバスを作成し、縦幅は適時伸ばしながら作っていきます。レイアウトも部分分けを意識しながら組んでいくと後から手直しがしやすくなります。ヘッダ、コンテンツ、サイドバー、フッタなどでレイヤー分けをしながら部分ごとに作りましょう。XDで実際にレイアウトを作成していく細かい流れは長くなるので、別の記事で書こうと思います。PC用レイアウト作成の注意点PC用レイアウトの注意点として、画面の横幅はモニタやウインドウサイズによって変わってくることです。1366pxだったり1280pxだったり、プロジェクターに写すとそれ以下だったりするので、横幅がオーバーしないように注意しましょう。画面サイズが縮んだときに、レイアウトのどの部分を縮小するのかといったイメージは持っておく必要があります。縦幅はスクロールするようにすれば良いので、そこまで意識しなくても良いです。スマートフォン用デザインに直そうPC用、スマホ用のデザインは両方制作する必要があります。ゼロから作らなくても、大きさを調整することで比較的ラクに作ることができます。スマホは基本的に横幅は350pxです。PCよりもかなり小さいです。同じ情報をレイアウトを変えて表示する必要があり、構想段階からある程度両方のレイアウトを意識しておかないと手が止まってしまうこともあります。スマートフォン用デザインの注意点Illustrator、Photoshopでデザインする際に非常にややこしい点として、全サイズを二倍にしてデザイン制作をする風潮があります。理由はスマートデバイスのRetinaディスプレイ仕組みのために、2倍のサイズの画像を用意する必要があるからです。ここで書くには内容が濃すぎるので割愛します。BLOG様)XDでデザインする場合はこの2倍計算は不要です。デザインデータ内の画像を2倍or3倍にして切り出すRetina用機能があるので等倍でデザインできます。練習方法Webデザインも反復練習が有効スポーツでもプログラミングでもデザインでも、初心者のうちは反復練習が一番効果が出ます。深く考えず、基本機能を覚えたらとにかく何かを作ってみましょう。作ってみたいアイデアがあるならそれを作ってみるのが一番良いです。アイデアを作っていく中で、「あれ、こういう部品はどうやって作るんだろう」と思ったら適時ググりながら機能を覚える。これを繰り返していくうちに必要な知識が身につき、デザイン制作をこなせるようになっていきます。気に入ったサイトを模写制作しようもし気に入っているデザインのサイトがあるなら是非模写制作してみましょう。サイト上の画像などの部品は全てダウンロードし、そっくりそのままソフト上でデザインを再現します。(公開せず、自分の練習の為であれば著作権等の問題もありません)1回これをやるだけでもソフトの機能はだいぶ覚えられますし、余白の取り方、フォントの大きさなどのコツが身につきます。見ているだけでは気がつかなかった工夫も、作ってみることで「ああ!こんな風に表現してるのか!」と気がつけることが多いです。デザインは出来そうで出来ないまず作ってみて自分を知ろうデザインは「出来そうで出来ない!」と感じることが非常に多いと思います。「こんなものが作りたい」というイメージはあっても、初心者が実際に作ってみると素人感満載のデザインになってしまいがちです。誰もがそんな感じですから、まずは自分を知るためにも1つ作ってみるのが良いでしょう。1つ作ってみてイメージが目に見えるものに変わることで、自分に何が足りないのかがわかってきます。作らないうちはイメージだけです。進展することはありません。Adobe社ソフトは月額制で初期費用は安いので簡単に始められます。一つ、自分の憧れを実際に制作してみて目に見える形にしてみてはいかがでしょうか。趣味は可愛い絵を描くこと。