calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

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

Web_Design_Skills

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

エンジニア速報は Twitter の@commteで 1 日 5 回配信しています。

Sponsored Link

もくじ

コンテンツ設計

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

コンテンツ設計

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

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

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

skills-illustrations_skill

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

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

photo-shooting_skill

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

３．動画編集の技術

video-editing_skill

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

４．コピーライティング

copywriting_skill

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

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

motion-graphics_skill

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

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

６．電子書籍の作成

e-book_skill

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

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

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

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

７．UX・UI・IAの知識

ux-ui-ia_skill

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

８．レイアウト基本原則

layout-basics_skill

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

９．配色＋色彩計画

color-planning_skill

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

１０．フォント設計

font-design_skill

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

１１．フラットデザイン

flat-design_skill

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

１２．カンプ作成

kamp-created_skill

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

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

use-photoshop_skill

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

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

use-illustrator_skill

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

１５．Dreamweaverの使い方

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

banner-created_skill

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

１７．ボタン作成

button_creation_design

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

スポンサード リンク

関連記事

Comments

  1. Kc_fuji より:
    2014年3月17日 10:35 PM

    いつも、ガッチリまとめてますね(・∀・)

    Webデザイナーしながら、映像編集もちょこちょこやってます。

    「ayato@web」は中級レベルのTipsが多いので
    完全初心者用には、有名ドコロですが
    「After Effects Style」http://ae-style.net/の方がいいかなと・・・。

    あと、「After Effects STUDY!!」さんも初心者向けです(^^)
    http://fukidashi.web.fc2.com/

    あと、全エフェクトの解説ページもあります。※AEはエフェクトが多いですから・・・
    【After Effects全エフェクトの解説】
    http://www.okosama.org/AE/

    これからも、サイト見させていただきますm(_ _)m

    返信
    • 西田 鉄平 より:
      2014年3月17日 10:49 PM

      けぃしぃさん、コメントありがとうございます！
      DTP、WEB制作、映像編集までやられるなんて、すごいですね！
      ご紹介いただいたサイト拝見させていただきます。

      また、遊びにきてください～

      返信

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。