紙のデザイナーが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ではできないこと 4選

「これってSharePointでできないの!?」なんていう瞬間、開発やカスタマイズの現場では意外と多くあります。SharePointはとても柔軟なプラットフォームですが、実は“万能ツール”ではありません。「コードを書けば何とかなる」と思って構築を進めると、モダンページの仕様や制限に阻まれて苦い思いをすることもしばしば。今回は、実際のプロジェクトや運用の中で見えてきた「SharePointではできないこと」をまとめて紹介します。 目次1 1.CSSとJSが直接使えない1.1 ク […]

Webサイト制作

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう

ホームページ制作において、更新機能を手軽に導入できるのがWordPressです。 専門知識がなくても記事の投稿やページ編集を行いやすい一方で、クライアントが自分で運用するには、が欠かせません。 今回は、そのための仕組みづくりについてご紹介します。 制作側の方はもちろん、クライアント側でホームページ運用を担当される方も、制作時のご相談などにぜひ参考にしてみてください。 目次1 管理画面のロゴを企業ロゴに変更する2 管理画面のURLを変更する・認証などを付けてセキュリティ面を強化 […]

Webデザイン

アプリのロゴアニメーションをAfter Effectsで作成→Lottieに変換【iOS/Android対応】

こちらは、当社でリリースしたアプリ「ピンピタ」で使用しているロゴアニメーションです。 スプラッシュ画面でロゴが動くと、ぐっとアプリらしい印象になりますし、作ってみたいですよね。 今回は、After Effects(以降AE)でロゴアニメーションを作成し、アプリに組み込むまでをご紹介します。 AEと聞くと難しい印象がありますが、PremiereやFlashなどを触った経験がある方なら、すぐに慣れます。 もう一度再生 目次1 作業フロー1.1 注意点:グラデーションが使用不可2 […]

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

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

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

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