WEBデザイナーが教えるクリエイティブ系への転職情報サイト「WEBデザイナーズナビ」

Webデザイナーズナビ 〜デザイナーの転職・スキルアップ情報 〜

PhotoshopでWEBデザインするときコーディングを意識するべき理由

コーディングを意識したPhotoshopでのWEBデザイン

WEBデザインのメイン業務であるPhotoshopでの画面デザイン。この作業に必要不可欠な知識があります。それは「コーディング」です。WEBサイトはHTMLとCSSは作られているため、この2つで再現できないデザインはどれだけ美しいものであっても価値はありません。

そして多くの企業やWEBデザイナーがそのルールに従いWEBサイトを制作してるため、ユーザーがそのレイアウトに慣れています。ユーザーが慣れている=使いやすい=良いデザインと言えるでしょう。

例えばyahooのトップページも、Googleのニュースも、3列にでコンテンツが表示されてスクロールするデザインになっています。数多くの情報を伝達するWEBサイトはユーザーが見慣れているレイアウトから逸れることはありません。

このようなことから

この2点を押さえることがPhotoshopでWEBデザインを始める第一歩です。

当然商品のプロモーションのみを目的としたWEBサイトはこのルールの外にありますが、初心者のデザイン力とコーディングスキルでは難しいので、まずは基本を抑えましょう。

コーディングを意識したPhotoshopでのWEBデザインの考え方をまとめます。

この記事の内容

デザイナーLevel:2 「アルバイト採用レベルのWEBデザイナー」目次

仮デザインしたものがHTMLとCSSで再現できるかを確認する

そのデザインはHTMLにすることができるのか

前回「Photoshopで行うWEBサイトデザイン~環境設定と基礎レイアウト~」作成したワイヤーフレームから起こした大まかなデザイン案がコーディング出来るものなのかを確認します。横幅1080pxがWEBデザインの領域ですが、1つ考えるべきものがあります。それは背景です。

最近の流行は1カラムで、ヘッダー・コンテンツ・フッターのすべてが画面幅100%に対応した背景も持つものです。これはデスクトップPCでの主流うである1920x1080pxのモニタで見ても安っぽく見せないためです。

今回のクライアントは老舗旅館であり、目的は集客です。よってPCでも洗練されたデザインの方が良いのではないか?とこのようにクライアントの意図を汲みとってデザイン、コーディングのバランスを取っていきます。

ここでは横幅100%対応・コンテンツの横幅1080pxでのデザインを採用することに決定しました。

実際にデザインにHTMLを書きこんでみる

PhotoshopデザインにHTMLを書き込んで見る

実際の作業では、頭の中でコードを思い浮かべるだけで十分です。HTMLとCSSでデザインが再現できる確信を得られればそれでいいのです。

未経験・アルバイトのWEBデザイナー志望の方には少し難易度の高い作業になりますが、コーディング能力を向上させる良い勉強方法なのでおすすめです。

サンプル画像は私がぱっと思いついたコーディングです。 大枠の部分だけCSSも書き込んでいます。 CSS3が使える人divの代わりにはarticleやsectionタグを使用したほうが美しいコードとなります。今回は初心者から使用できるコードのみを使いため極力CSS3の使用は避けてWEBを作ります。

コーディングを意識してデザインをすると開発スピードが上がる

「このデザインはこういう風にコーディングすればいいかな」とわかるようになると様々な利点が生まれます。

結果としてWEBサイトの開発スピードが上がります。HTMLとCSSの知識はWEBデザイナーに限らずWEBサイト制作をするすべての人に必要な知識と言っても過言ではありません。

WEBデザイナーはコーディングができると確信してからデザイン作業をすすめよう

ディレクターの書いたワイヤーフレームを確認し、ざっくりとPhotoshopでレイアウトを書く。ここから精密なデザインに入っていくのですが、その前に一度立ち止まり、これがHTMLとCSSになった時にどのようになるのかを確認しましょう。

コーディングを意識したデザインのできるWEBデザイナーはディレクターからもHTMLコーダーからも「仕事のしやすい人」と高い評価を受けることができ、仕事もスムーズに進みます。

WEBサイトをすべて1人で作る際にも、この確認を怠ると実際のコーディングでつまづきデザイン修正をすることになり当初予定していたデザインとはかけ離れたWEBサイトができあがります。

Photoshop上でのデザインがそのままHTML+CSSで表現できるというのは思いの外高等技術です。自分の起こしているデザインが形を変えずにWEBサイトにするにはどうすればいいか、本腰を入れてデザイン作業を入る前に見直してみましょう。

スポンサーリンク

Desingers Navigator

アルバイトWEBデザイナーから始まり派遣WEBデザイナーを経て、大手企業正社員WEBデザイナーへ。その後WEBディレクターになりUI・UXの専門に。現在はフリーランスのWEBデザイナー / ディレクターをしています。

関連記事 / RELATED POST