絵心が無い人が簡単なグラフィック素材を作るのに役立つ記事8選：Webサイト作成手順を勉強するまとめ（終）（1/2 ページ）

新社会人のWeb制作者／デザイナー向けにAdobe Creative Cloudの使い方を例に、現場で使える具体的な制作手順とテクニックを学んでいく入門まとめ連載。今回は最近流行の「フラットデザイン」なパーツ／グラフィック素材の制作に役立つFireworksの使い方について。自動シェイプ、パス、ブレンド、ストローク、スライスの使い方や、シェイプに模様やパターンを入れる方法、CSS書き出しなど、さまざまなテクニックを紹介します。

» 2014年05月23日 18時00分公開

[岡本紳吾，hatte.Inc]

今回の主な内容

　連載第1回の「初心者でもPhotoshopの基本的な使い方が分かる入門記事9選」、連載第2回の「HTML・CSS・WordPress初心者のためのDreamweaverの基本的な使い方が分かる記事10選」でWebサイトを作れるようになり、さらに前回の「HTML5初心者でもWebアニメーションの簡単な作り方が分かる記事11選」でWebサイトにさまざまな動きを加えられるようにもなった。しかし、Web制作現場では、まだまだ必要とされることは多い。

　例えば、Web制作を生業としていると、個々のパーツ／グラフィック素材をデザインする機会に遭遇することがよくある。絵心があるとか無いとかは別として、ワークフローに組み込まれている以上、ボタンを作るとか、背景のテクスチャを作るとか、できないと作業が前に進んでくれないことだってあるのだ。

　そこで、今回はWeb制作で必要となるパーツ／グラフィック素材を簡単に作成する方法について、「Adobe Fireworks」（以下、Fireworks）を例に、提供元であるアドビシステムズが使い方を無料で解説している「Adobe Pinch In」の記事を一部引用しながら、現場で使える具体的な制作手順とテクニックをまとめて紹介していこう。

【ステップ0】最近流行の「フラットデザイン」を勉強しておこう

　最近のWebサイトのトレンドでよく言われているのが「フラットデザイン」だ。フラットデザインは端的に言うと、立体的な表現を最小限にとどめ、シンプルさが強調されたデザインのことだ。

　シンプルなデザインは手間が掛かっていないように見られがちだが、シンプルな見た目ゆえ、ちょっとした破綻もユーザーの目に止まってしまう。以下の記事にあるような、すでにリリースされているフラットデザインを採用しているサイトなどをしっかりチェックしておくと、いざというときに生きてくるだろう。

　最近ではアプリケーションのUIもフラット化が進んでおり、スマートフォンの世界だけではなく、デスクトップもフラットになりつつある。

Webデザイントレンド定点観測 - 2014年1月フラットなタッチのイラストレーション（Adobe Pinch In）より引用

Webデザイントレンド定点観測 - 2014年1月フラットなタッチのイラストレーション（Adobe Pinch In）より引用

今回はUIよりも、メイングラフィックに使用されているイラストレーションのタッチに着目して、気になるサイトを探してみました。こういったフラットなタッチのイラストレーションは「SVG」で作成するのにも向いていますので、様々な画面サイズの端末で拡大縮小表示されても、ぼやけることなく美しく描画されるというメリットも見逃せません。

では早速、ピックアップした10個のサイトをご紹介していきましょう。