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

関連記事

プログラミング

【phpdotenv】PHPで環境変数を取り扱うお話

PHPでサーバーの環境ごとに設定ファイルを用意する場合、config.phpなどのファイルにデータベースの接続情報やAPIのキーなどをdefineで登録すると思います。 これは昔からある一般的なやり方ですが、例えば「ローカル環境やテスト環境と本番環境で情報を出し分けたい」「GitHubやSubversionなどに接続情報を管理されたくない」ということがあるかと思います。 Linuxの場合は「.env」でユーザーごとの情報をあらかじめ設定することが可能ですが、PHPだとデフォル […]

Webサービス

【CAPTCHA系】reCAPTCHAの代替サービスを紹介するお話

みなさん、reCAPTCHAを使ってますか? CAPTCHAと呼ばれる機能は問い合わせフォームやログインフォームなどいわゆるbot系対策として有効で、その中でもreCAPTCHAは無料かつ簡単に導入できるたため、様々な場所で使われてます。 目次1 2024年4月から実質有料化?2 他にないのだろうか?3 アカウントを作る4 PHPでの実装5 最後に 2024年4月から実質有料化? しかし、2024年4月から今まで100万リクエストまで無料だったのが、1アカウント合計1万リクエ […]

Webサイト制作

Webアクセシビリティの基本を学ぼう!

近年Webサイト制作時に求められる『Webアクセシビリティ』。 正直なんだかよくわからない、ややこしそうだなあと思う方も多いと思います。 自分も勉強中ではありますが、今回は対応しやすそうな内容をなるべくわかりやすくまとめてみました。 一緒にWebアクセシビリティについて学んでいきましょう。 目次1 そもそもWebアクセシビリティってなに?2 基本的な対応内容2.1 色のコントラストをはっきりさせよう2.2 文字サイズを変更できるようにしよう2.3 できるだけテキストベースを心 […]

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

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

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

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