紙のデザイナーが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サービス企画、プログラミングや、売上・請求管理にいたるまで幅広く担当しております。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

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

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

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

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