スキルが増えた！今後を生き抜くためにＷｅｂデザイナーも習得しておきたい技術

• 作成：2014/03/17
• 更新：2014/11/01
• Webデザイン

クライアントさんの依頼やクラウドソーシングでもライティングや撮影依頼の需要が増えてきました。コンテンツファーストの時代になり、ライターだけじゃなく「コンテンツを作れる」デザイナーやエンジニアは、今後100%重宝されます。今回はフリーでも活躍できるように、ライバルのデザイナーさんと差別化できるように「コンテンツ作成」もできるデザイナーになるためのスキルをまとめました。

もくじ

コンテンツ設計

• １．イラスト作成のスキル
• ２．写真の撮影技術と知識
• ３．動画編集の技術
• ４．コピーライティング
• ５．モーショングラフィック
• ６．電子書籍の作成

Webデザイナーの基本知識とスキル

• ７．UX・UI・IAの知識
• ８．レイアウト基本原則
• ９．配色＋色彩計画
• １０．フォント設計
• １１．フラットデザイン
• １２．カンプ作成
• １３．フォトショップの使い方
• １４．イラストレーターの使い方
• １５．Dreamweaverの使い方
• １６．バナー作成
• １７．ボタン作成

コンテンツ設計

筆者の会社ではHP納品の中にコンテンツが入ることが多いです。コンテンツの中には、企業や販売店のハウツーページやツールの使い方などの「コンテンツページ」が含まれることもあります。

以下は、文章だけじゃなくて写真、キャッチコピー、イラスト作成、動画編集などを使い「情報を的確に、明確に伝える」ためのスキルです。

１．イラスト作成のスキル

Webサイト上で使用するイラストや挿絵を描くノウハウや知識。キャラ作成の需要は今後増えそうです。以下はプロのマンガ家やイラストレーターが教える絵の描き方、イラスト料金相場、上達方法、キャラクターの作り方など。

• 中村佑介さんの「見やすい」イラスト講座 - Togetterまとめ
• 夜ふかし先生の『女の子を描く時のワンポイントメモ』 - Togetterまとめ
• 手書きからスキャンしてPhotoshopで！ウェブデザイン用イラストを制作する時の手順 | 株式会社LIG
• 背景が描けるようになる方法を教えちゃうゾ☆（ゝω・）vｷｬﾋﾟﾋﾟ｜萌えイラスト上達法！　お絵かき初心者の学習部屋
• 上手に描くコツはどこに？プロのマンガ家に学ぶ「絵の描き方」 - はてなブックマークニュース
• イラストにおけるキャラクターの撮り方、考え方、tips - pal-9999の日記

２．写真の撮影技術と知識

Webサイトや広告に掲載する写真を撮影する知識。専属のフォトグラファーがいない会社、素材だけで対処できないとき、自分で準備しないといけないときもあるので一応整理しておきます。

• [黄金分割構図] 写真のキホン「構図」のおさらいをしてみましょう！ - 女子カメ Watch
• [ライティング] スピードライトでもっと写真を楽しく | ライティングテクニック
• [ブツ撮り] ブツ撮り、商品撮影をするなら知っておきたい撮影以外の大事な３つ要素。
• [商品撮影] 商品写真ライティング入門
• [スローシャッター] 簡単にスローシャッターでカッコ良く写真を撮る設定|studio9
• [シャッタースピード] 夜景、イルミネーション撮影で…|studio9
• [アオリ撮影] アオリ撮影（デジタル写真修整）解説
• [ISO感度] デジタル一眼レフカメラ入門初心者講座/ISO感度とは
• [レフ板] 100円で作るレフ板で10倍引立つ写真に [写真撮影] All About
• [露出] 露出 - デジタル一眼レフカメラの基礎知識 | ニコンイメージング
• [逆光] 逆光での撮影テクニック | カメラノート
• [絞り値] 絞り値、シャッター速度、被写界深度の関係を覚えよう！
• [被写界深度] 被写界深度(被写体深度）とは-カメラ･デジカメの撮り方・テクニック集
• [キャッチライト] ヒントは目の中に　～キャッチライトの話～　（前編）
• [接写] 写真撮影の仕方
• [訴求度] 訴求力の高い画像の選び方 | bizYou Webサポート
• [画像サイズ] デジカメの基本：デジタルカメラの画像サイズ：Cashari!
• [高級品を撮る] 腕時計を撮ろう！「男のブツ撮りテクニック」 - デジカメ Watch
• [構え方] Canon 撮影テクニック - 撮影テクニック編
• [料理] おいしそうな料理写真を撮るコツ・テクニック - NAVER まとめ
• [シーンごと] デジタル一眼レフカメラ写真撮影方法や上手な写真の撮り方
• [デジタル一眼レフ] デジタル一眼レフカメラの基礎から実践まで
• [デジカメを使った写真の撮り方] デジタルカメラのハウツー 67記事 | nanapi
• [その他まとめ] 写真を上手に撮る為の…載っているサイトまとめ : ラジック

３．動画編集の技術

YouTubeを集客用の媒体として有効に使おうと提案することもあるでしょう。実際に動画編集や動画作成の依頼もあります。以下、動画アップロードの他に、動画作成方法の基本知識や方法。

• 初心者が陥りやすいYoutubeに動画をアップロードするときの4つのミスと改善方法 | ホームページ作成のことなら湘南うぇぶ
• 動画の作り方 - ニコニコ動画まとめwiki
• 初心者のための動画作成講座｜仕事で使える映像制作｜
• これ以上ないというぐらいに詳しい「動画の作り方」まとめ｜jp.blogs.com｜おもしろブログ記事のまとめサイト

４．コピーライティング

ライターさんが持っているスキル。コピーの良し悪しでユーザーの消費が左右されることがあります。またテキストがコンテンツの中心となるサイトではライティング技術が求められます。クライアントさんが準備できない場合は自社で用意するときもあります。

• もう迷わない！「」『』（）【】の“使いどころ”／テクニカルライターが教える、文章の見た目を良くする技術 | きんどるどうでしょう
• ライター必携の原稿セルフチェックシート15項目 | 株式会社LIG
• 顧客心理に響く「売れる文章」9つの書き方 | 京都のウェブライダー松尾のブログ
• Webデザイナーも知っておくべき？人を動かすコピーライティング術 - W3Q
• これは書くことがとことん苦手な人のために書いた文章です→小学生から大人まで使える素敵な方法 読書猿Classic: between / beyond readers
• 文章力がなくても中身のある文章が書けるようになるたったひとつの教え | KOアーティスト

５．モーショングラフィック

モーショングラフィックは静止画に動きや音を加えて動画にしたものです。ウェブコンテンツで使われることが多くなりました。職種でいえば、モーショングラフィックデザイナーになります。以下はAfterEffectsの作例サイトで基礎的なことから丁寧に掲載。

ちなみにインタラクションデザインは、従来のUIデザインのような、使いやすさを追求するデザインのことを指します。快適にユーザーが使えるように「操作体系」をデザインすることです。

• ayato@web
• かっこいいモーショングラフィックス - NAVER まとめ

６．電子書籍の作成

PDF、EPUB、Kindleなどさまざまなフォーマットの電子書籍の作り方を解説してあります。

• ASCII.jp：Kindle/iPad対応！電子書籍の作り方 (1/7)｜今すぐ始める電子書籍制作入門
• もりぞおアジア海外就職紀行 「ものすごく簡単で、ありえないほど難しい」Web1.0的電子書籍を手作りして、Amazon KDPで売ってみた！
• WordPressを使って電子書籍を作成·PressBooks MOONGIFT

Webデザイナーの基本知識とスキル

Webデザイナーに必要なスキルを一旦おさらいします。

Webデザイナーはウェブページのビジュアル担当。コーディング以外では、デザインカンプ・写真・イラスト・タイポグラフィ・ロゴ・ボタン・バナーなどウェブページとしてレイアウトをデザインします。

７．UX・UI・IAの知識

IAは主にインフォメーションアーキテクトが担当しますが、UIとUXの違いやアクセシビリティ、スタートアップを成功させるための知識などはデザイナーさんも知っておきたい知識のひとつです。

• 優れたユーザーインタフェース（UI）を実現するために確認しておきたい36項目 | gori.me（ゴリミー）
• UI/UXデザインに関わる者なら見ておきたい記事とスライド10選 - Sadakoa.jp-Blog-
• UX・UI・IAやアクセシビリティの「専門知識」が増えるまとめ

８．レイアウト基本原則

自分でデザインしたページを見やすくコントロールできるように。関連する項目をグループ化する近接、意図的に配置する整列、視覚的要素を繰り返す反復、はっきりと異ならせるコントラストなどの基本原則やデザインの概念を学べます。

• 感覚派デザイナーも知っておいて損はない「デザインの要素と原則」 | Design | WebNAUT
• 「デザイン」の概念と、４つの基本原則を知ろう – WP-E（仮）Web Professional Education

９．配色＋色彩計画

制作者側に色の知識がないとデザインの指示や社内コミュニケーションすらうまくいかない場合があります。配色の基礎知識があると業務もスムーズ、セオリーを知れば完成したデザインに説得力を持たせられます。

• 配色を考えやすくするための様々なルール - YATのBLOG
• Webデザインの配色について学ぶときに読んでおきたい14の記事｜Webpark

１０．フォント設計

書体の選定や配置などを駆使して、可読性（読みやすさ）や視認性（見やすさ）を確保し、商品イメージなどをユーザーに訴求する必要があります。またサイトコンセプトやターゲットに合わせて変化させていくことが重要です。

• 文字を扱う上で知っておきたい基礎知識 | Basic Design Note
• フォントや「文字」に関するまとめ

１１．フラットデザイン

フラットデザインにする場合、どういったサイトを参考にすればよいのか、制作時にどういったことに注意すれば良いのかなどポイントをわかりやすく解説してあるサイトは以下。

• 今年絶対おさえておきたいフラットデザインのまとめ | 株式会社LIG
• フラットデザイン入門: その利点と注意点と主なテクニック | freshtrax | btrax スタッフブログ

１２．カンプ作成

企画提案した内容をどこまでデザインに落としこむことができたのか、クライアントさんに説明する時やコンペの場合に必要です。

• 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice
• WEBディレクターなら参考にしたい手書きの画面設計書｜designaholic -Creative Column-

１３．フォトショップの使い方

フォトショップを最初に扱うときにやっておきたい設定、イラレのように直接図形を選択できたり、ブラシで描いた時に端がぼやけないようにする方法など。質感の出し方、レトロ感の出し方も参考になります。

• 作業効率あがった！Photoshopの使い方と小技まとめ
• 少しの手間で見栄えが良くなる！Photoshopで使える簡単テクまとめ。 | Handy Web Design
• 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6含む) | Design Color
• Photoshop初心者は絶対に覚えてほしい!!画像を劣化させずに調整できるPSDデータの作り方

１４．イラストレーターの使い方

アピアランスやクリッピングマスクにカーニングなど知っておきたい半歩進んだテクニック集。

• Illustratorによるイラスト制作の基本操作｜1 pixel｜サイバーエージェント公式クリエイターズブログ
• フリー素材と「すごい」Illustratorテクニック総まとめ
• 【Illustrator】デザインをワンランク上げるイラストレーターのチュートリアル集 その１ - NAVER まとめ

１５．Dreamweaverの使い方

これからWEB業界を目指す人は、Dreamweaverの使い方から学んでいいかもしれません。普通のエディターでできないことも沢山あるので。以下は起動や環境設定の初期から解説してあります。

• 入門！Dreamweaver使い方講座
• Dreamweaver入門　ドリームウィーバーの使い方

１６．バナー作成

制作時や保守の時、広告出稿前でも、高頻度でバナー作成や追加依頼があります。こちらはバナーデザインを効率よく進めるための制作プロセスや土台の作り方など。

• デザイン作業のスピードアップ｜1 pixel｜サイバーエージェント公式クリエイターズブログ
• 新人必見！倍速かつ高品質なバナーを作るためのコツを全公開します | nanapi TechBlog

１７．ボタン作成

CSS3のみでボタンを作成するための方法をメモ。

• CSSのみで実装するボタンデザインやホバーエフェクト 20＋α | NxWorld
• CSS3の勉強になるかも！？画像を使わないボタンの作成手順｜Webpark

• 1

2017/05/22

Photoshopで簡単にできる不規則な円の作り方

不規則な円を取り入れたい時に。デザインカンプなどに使える、Photoshopで不規則な円を作る方法。とても簡単ですぐ使えるのでメモしておきますね。 不規則な円の作り方

2014/01/6

効率的に学べた！Webデザインを「職種別」に基礎から勉強出来る総まとめ

Web制作において、Webデザイナーに関係するものを職種別にまとめました。会社によって分け方は違うと思います。今回は参考サイトとスライドを掲載しています。 もくじ アー

2015/10/20

超初心者向け「Sketch」の便利な使い方

ワイヤーやデザインカンプを作る時に、IllustratorからSketchに変更したら便利だったのでメモ。 Zoom Blur：画面平滑化（中心からぼかす）

2012/10/22

【感動】ルーラー「Pixus」がパワーアップして綺麗になってる！

Mac / windows 共通で使える定規ツールは沢山ありますが、インターフェイスが綺麗で軽く、アプリ開発者もWebデザイナーも使えるルーラーは「Pixus」です。