紙のデザイナーがWebデザイン制作する時に気をつけて欲しいこと。

  • このエントリーをはてなブックマークに追加

年度末に向けて繁忙期に入ってまいりました。
この忙しいときにインフルエンザも流行っているようですので、みなさんご注意ください。

さて、受託制作で制作する際に、当社ではデザインからまるごとお任せいただく場合と、会社案内やパンフレットなどのデザインが同時進行している場合は紙のデザインをしたデザイナーさんがそのままテイストを引き継いでデザインしたデザインを元にコーディングをする場合の2パターンがあります。

Web制作に携わっている方であればタイトルから大体の察しは付くかと思うのですが、グラフィックやDTPなどのデザインをされている方が制作したデザインにはコーディングする時に難があったり、実際にコーディングしてみるとテキストの関係上、静止画で見たデザインと異なってしまう場合があります。

結局、当社でデザインをやり直したりすることも多々あります。

やはり餅は餅屋というかWebデザインはWebデザイナーにお任せしていただくのが一番良いかと思うのですが、なかなか仕事の流れ上そういうわけにもいかない場合もあるようです。
グラフィックデザイナーやDTPデザイナーの方のデザインがどうこうというわけではありません。

ただ、デザインする際、クライアントに提出する際にちょっと気を付けていただくとコーディングの段階で色々と面倒なことにならないのではないかな?と思うことがあります。

もちろんお任せいただければ一番確実なのですが、そうはいかない場合の紙のデザイナーがWebデザインをする際のちょっとした確認の注意ポイントを書いてみます。
実際に案件を進めていると「初めにちょっと話をしてくれてれば良かったのに。。」ということはよくあります。

コーディングのみの案件だった場合、Webディレクターの方も何も言わないよりは、事前にこの辺りのことをアドバイスしてあげると、結構クライアントにも重宝されますよ。

 

画面サイズの確認を。

よく画面サイズというものを完全に意識しないで作られたデザインを見かけます。

紙の感覚で作ってしまうと紙に印刷した段階では、よく見えるのですが、実際のデータは横幅が700pxくらいしかなくて、そのままコーディングしたらやけにこじんまりしたサイトが出来上がってしまったなんていうこともあります。
(もちろんその後全面的にWebデザイナーの方でやり直しましたが。。)

当社では、もちろん過去そういうことがあったので、今は必ずサイズを事前に確認していただき合わせて制作していただきますが、何も指摘しないと横幅が結構小さかったりします。

Webサイトはディスプレイで見るものですので、ピクセル単位できちんと幅を確認する必要があります。
逆にWeb制作会社でデザインを元にコーディングだけを担当する場合は事前に確認をしてあげると親切ですね。

 

紙ベースだけでなく必ずブラウザベースで確認を。

打ち合わせの都合上、紙ベースでWebデザインを確認するしかない場合もあります。

ただ、前項でも書いたとおりWebデザインは紙に印刷してみるものではなく、ブラウザ内で見るものですので、印刷だけでなく必ず静止画ベースでテストアップしてブラウザに当て込んで確認していただくことをお勧めします。もし紙で確認する場合は必ずブラウザに当てはめたイメージで印刷することです。

もちとん発色もディレスプレイで見る場合と印刷したものでは異なりますので、実際にディスプレイで確認してみたらイメージが違うので修正してください、なんていうことも往々にしてありえます。

 

テキストと画像の区別の確認を。

紙とWebで一番感覚が異なるのが文字の扱いです。
紙の感覚でいくとゴシックやメイリオなどを使うことはあまりないのかもしれません。

Webサイトにはテキストは必要不可欠です。SEO、CMSの導入、メンテナンスなどなど、動的な要素が多いのは紙と大きく異なります。
デザインの段階でテキストデータにしたい部分を新ゴなどにしてしまうと、実際にHTML化した場合にはフォントを置き換えざるを得ません。
当然デザインの見た目も大きく変わってきます。

ですので、テキストにする部分はよく確認してメイリオやMSゴシックなどにしてクライアントに確認するのが望ましいでしょう。
次の項に続きますが、欲を言えばWindowsでフォントの変換をしていただきたいです。

 

出来ればWindowsでフォントを置き換えて確認を。

紙のデザインはmacでやられている方が圧倒的に多いと思うのですが、Webサイトを閲覧するユーザーは圧倒的にWindowsが多いです。
ですので、出来ればWindowsでテキストのフォントなどを置き換えてから提出することをお勧めします。

クライアントによってはmacでデザインされたものを静止画もしくはmacで見せてもらってWindowsでもその通りに見れるのかと思ったら随分印象が違った、なんていうことも聞きます。
ちょっとしたことですが、こういった確認の有無によって後で修正を余儀なくされたりするので注意が必要です。

 

コーディングする際に可能かどうかの確認を。

レイアウトについてはデザイナーさんのこだわりもあるかと思うのですが、実際にHTMLコーディングをして初めてWebサイトになります。
印刷物はそのまま紙に印刷されますが、WebサイトはHTML化する際に制約が多々あります。

たとえばその制約上、例えば単純に画像にすればよいのですが、ここはテキストにしたいなどの要望に応えられないレイアウトも出てきます。
もちろんクライアントの意向をデザインに反映することは大切ですが、提出する前にこのレイアウトでHTML化するのに問題ないかどうか事前に確認はしていただきたいです。

デザインが通ってしまってHTML化する段階で大きなレイアウト変更が必要になる場合もありますので。。

 

======

すべての場合ではありませんが、大体紙のデザイナーが作ったデザインをHTMLコーディングする場合、何かしら調整が入ります。

冒頭で「餅は餅屋」と書きましたが、紙のデザイナーが作ったデザインをコーディングする場合、Web制作会社としてこれらのような事は事前に確認をしてあげると制作もスムーズです。
時々、もらったデザインをそのまま再現するために無理やり画像でコーディングしてしまうなどの極端なことをする方もいらっしゃるようですが、そこは「餅は餅屋」なのですから、一言アドバイスしてあげたいところですね。

執筆者:高本

株式会社8bit 取締役の高本です。 社内のWebサービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

プログラミング

SharePoint REST APIを使用してリストの情報を取得し、headerにナビを作る

SharePointで作成したリストの情報をREST APIを使用して取得してみましょう。 今回は、APIで取得した情報を、headerにリンクとして差し込んでみます。サイト全体共通のナビでも、リストを使用すると、一か所で管理できるので便利です。 目次1 前提条件2 1.REST APIで情報を取得2.1 REST APIのURL2.2 データを取得する処理3 2.取得した情報をheaderに表示 前提条件 SharePoint Online モダンUI カスタムJSが使用で […]

WordPress

WordPressで権限やユーザーごとに管理画面のサイドメニュー表示を切り分ける

デフォルトだといろいろな項目が表示されているWordPressの管理画面のサイドメニュー。 慣れていない人にはわかりづらいですよね。 また、権限によってデフォルトで非表示にしてくれたりもしますが、この部分は見せたくないな…ということも多いと思います。 今回はWordPressで権限やユーザーごとにサイドメニューの表示を変更する方法をご紹介します。 目次1 権限の種類について2 function.phpに記述する2.1 サイドメニューの非表示用のコード2.2 権限ごとに振り分け […]

プログラミング

jQuery+PHPで大容量ファイルを分割アップロードするお話

ファイルのアップロードを行う際に注意しないといけないのが「アップロード容量」と「タイムアウト」です。 どちらもサーバーの設定に関わるところでレンタルサーバーでは対処しきれないところもあり、大容量にするとそれだけアップロードに時間がかかりタイムアウトが発生しやすくなります。 そこでフロント側で分割してファイルをアップし、バックエンド側で受け取った後に結合するようにするとよいでしょう 注意すべき点として通常のPOSTでの送信ではないため、あらかじめそこら辺を考慮した処理が必要とな […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。