はじめまして。株式会社ベーシックのグラフィック・ウェブデザイナーの大竹です。この間、ベーシック社内のディレクターで元エンジニアの方と飲んでいるときに、彼がこう呟きました。

「自分でサービスを作っているとね、たまにリンクや広告用のバナーをデザインしてみたくなるんだよ。」

わかります。同じような思いをしているエンジニアの方も多いのではないでしょうか。僕もグラフィックが中心ですが、サイトのモックを作っては自分でマークアップしていきたいと思っています。

今回は(今後も?)エンジニアさん向けに、パターン化できる簡単なデザインの"ワザ"を提供していきます。

レイアウトまでは出来るけど、色彩感覚が…??

僕の勝手な考えかもしれませんが、みなさんレイアウトは出来るのではないでしょうか?自分で打ち込んだ文字をどこに配置するかと考える行為は、むしろパズルのようで楽しいかもしれません。

問題はそこから先で、どうしたら"綺麗に色を着けられるか"で悩む方が多いのでは?と思い、着彩・カラーコーディネートのポイントを動画で説明します。使うアプリケーションはAdobeのPhotoShop、一部Illustratorを使用します。


では、PhotoShopで上記のようにレイアウトを組んだとして、そこから先を説明していきます。

あまり難しい言葉は使わないように意識しましたが、わからない単語や説明がありましたらメッセージに残してください。後日、改めて解説します。また今回、作成に使用したデータ・素材は以下よりダウンロードできます。

素材ファイルダウンロード