0

デザインのチェック方法(コンテンツの評価について)

デザインの内容の評価について

●テイストの統一感はあるか?
※クール、モダン、フェミニン…例えばレトロなバナーが一個でも混在してたら、不安定です。

●行間、文字間は十分か?

●ジャンプ率は十分か?

●ロゴマークは使用許可のあるものだけになっているか?

●英文のつづりは正しいか?

●日本語の住所などもチェック。

●リンクのある所はクリックできそうに見えてるか?

●デザインの重さのバランスチェック。

●メインイメージのバランス
※写真は、ど真ん中ではなくすこしはずすとかっこよく見えます。

●フッターが間延びしてないか。

●テキストシャドウのかけ方が、統一されているか。

——————————-表から見えない所の注意———————————–

●ユーザビリティのため、sitemap.psdも用意しているか。お問合せフォームがあるサイトは

コーダーさん用にthanks.psdも作っておく。

●コーダーさんが分るように隠しレイヤーに” roll-over”と名前をつけ、

マウスオーバーしたときのgnavの色の変化したデザインも作っておく。

0

デザインのチェック方法(主にモニター、ブラウザについて)

社内のWeb担当者は、仕様するPCのモニタはノングレア液晶の使用で統一しています。(目が疲れないようにする為)

それでも疲れるので、私は少し明るさを落として使っています。

ではブラウザからデザインがはみ出さないかどうかの確認の仕方をご紹介です。

モニタの大きさ、比率はお客様それぞれですので、デザインが完成したらこのチェックは欠かせません。

右クリックで「画面の解像度」→解像度を1024*768に設定する→OKするとブラウザが画面ぴったりになります。

 

———-コーディングされたデータのチェックの場合——–

IE、firefox、chromeで崩れが無いかをチェックします。

IEで?f12を押すと下に「ブラウザモード」がでます。

IE7,8,9が選択できるようになりますのでバージョンごとにチェックします。

?※liの中のimgが、IE7で隙間ができたりするので注意。

以下は、忘れがちなチェック内容抜粋になります。

ロゴはindex.htmlにもどれるようになっているか?

google mapは正しいをビル名をさしているか?

外部リンクはtarget_blank設定になっているか?

google Analytics用タグが入っているか?

などがあります。

0

キレイだけど軽量のPDFをIllustratorで書き出す

デザインをpdfにする方法です。

出来るだけ画質を落とさずに、しかしメール添付できる程度の使い勝手の良い書き出しができると

ファイルを開ける人にストレスをかけずにすみます。

色々試してみました。

1.まず印刷入稿用のキレイなpdfから。

Illustratorでファイル→別名で保存→PDF/X-1a形式を選択→サムネイルを埋め込みにチェック

::::::::結果:::::::::::

2.72MB→見た目きれいですので、お送りしてプリントして頂く場合によさそうです。

直接添付するのは避けて、どこかのサーバにアップロードしてそのURLをお伝えしましょう。

2.もう少し軽くする方法をやってみました

Illustratorでファイル→別名で保存→Illustrator初期設定を選択、Illustrator編集機能保持のチェックはずす→圧縮→ダウンサンプルをバイキュービック法にする→圧縮ZIP

bycubic

::::::::結果:::::::::::

2.41MB→あまり変わりませんでしたが少し軽くなりました。ウィンドウに150ppi ?250ppi と設定数値が入っていますが

100ppiにおとしても結果同じでした。

 

3.まだまだ重いという方はもっと軽くできます…

最小ファイル書き出しにすれば簡単じゃないの?と思わるかもしれませんが

(Illustratorでファイル→別名で保存→最小ファイル書き出し)

これは確かに結果421KBと、一気に軽くなりますが画質がこんなに荒れてしまいます。

are

 

 

そこで先ほど書き出した1または2をAcrobatで開きます。

Acrobat X Proの場合→ファイルメニュー→名前を付けて保存→サイズが縮小されたPDF→既存を保持

::::::::結果:::::::::::

492KB→これなら、メールで気軽に送れます。しかも劣化が少ないです。これくらいの画質です。

kansei

 

0

可読性について

こんばんはー

webデザイナー見習いのNです。

今回は「可読性」について簡単にご説明をいたします!

○可読性とは?

前回説明しました「可視性」が「文字の見やすさや、

文字として認識のしやすさ」になります。

一方「可読性」は「文字としての読みやすさ」になります。

「可視性」にゴシック体が多いのに対し、じっくりと読んでもらうことを求める

「可読性」は明朝体、セリフ体などが多いです。

例えば、新聞でしたり、小説などの書籍がそれにあたりますね。

webサイトでは、見ている人にちゃんと読んでほしいと思う箇所に明朝体・セリフ体を

使うと「可読性」が上がるということになります。

フォントによって、様々な効果がありますので場面によってフォントを

使い分けていくと良いということですね。

次回はフォントの効果について、さらに細かく紹介してゆきます!

0

デザイナーのビジネスメール

今更ながら、メールの文章の作り方に関して自信がなく、
お恥ずかしいと考えております。

他の方が正しくやっている事を盗もうと思い、個人的にまとめました。

デザイナですとメールにURLをコピー&ペースト

する事が多いのですが
Mozilla Thunderbirdでは、
下書きのウィンドウにURLを直接打ち込むと
正しくジャンプしないバグがたまにあります。リンクは必ずブラウザからいちいちコピー&ペーストしましょう。

また、外部からMac標準搭載のメーラーからメールを受信すると文字化けすることがありますので
その場合はThunderbird等の他のメーラーをお使いくださいと送り主にお願いしましょう。

メールに1MB以上のファイルを添付するのも避けましょう。
dropboxの「パブリック」(アップしたら右クリックで「パブリックリンクのコピー」をして、urlが分る。)
やFTPに上げてそのurlを教えるという手があります。

<書き方の基本>
題名:内容と一致するように。
社外のお客様向けには
例【フューチャー】と社名を入れる。

一行目からの書き出し:

○○様

お世話になります。
○○です。

題名を正確に書くと、「表題の件につきましてご連絡です。」と引用できます。

 

内容:
上から目線の書き方を、言い換える
ありがとうございました。でも良いですが、→お礼申し上げます。という書き方もあります。
参考になりました。はダメ→勉強になりました。

長いメールになる場合を読みやすくする工夫として
============================
 こんな感じで小見出し
============================
をつけるとより良いです。

結び:
(たびたびお手数ですが)ご確認をよろしくお願い致します。
以上ご連絡を申し上げます。
以上ご報告申し上げます。
返事が欲しい場合→
念のため確認でございますが、ご一報くださいませ。取り急ぎご返信おまちしております。

最後にメールを書くのに考えて時間がかかってしまい、
すぐに返事ができない時は
「ご連絡をありがとうございます。検討して○日までにお返事致します。
まずはお受け取りのご連絡のみにて失礼いたします。」
などの例が、便利なフレーズと思われます。

0

可視性について

こんばんは!

webデザインの見習いNです。

前回は「視認性」について説明をさせていただきましたが、

今回は「可視性」について説明させていただこうと思います。

○可視性とは?

「視認性」はその対象の「物」や「形」の見やすさになりますが、

「可視性」は文字の見やすさや、文字として認識のしやすさになります。

○可視性について

可視性はポスターや、看板、道路標識で求められます。

webサイトでは、アイキャッチに文字を入れる場合も可視性が求められるときがあり

ます。

人がパッと見た瞬間にいかに読み取ってもらえるかが、重要となります。

ですので、こういった目にすぐ入ってもらいたいと思うキャッチフレーズや、注意につ

いては

「ゴシック体」や「サンセリフ体」を利用すると可視性が上がると言われています。

街中の広告を見てみると「ゴシック体」やそうでなくても、ポップな感じのフォントで大

きく

表現しているのが多いですね。

次は「可読性」についてご説明させていただきます!

それでは~

0

Webデザインで良く使うフォント

フォントを一体どれにしたらいいか

まず、
サイトの雰囲気から、ゴシック体がいいのか
明朝体が良いのかを判断します。

(いわば、日本語で新ゴを使うか
リュウミンを使うか)

それをベースに英文でサンセリフにするか
セリフにするか、を決定します。

********セリフ********
■伝統的・優雅
Caslon
Garamond
Optima
Times New Roman

■重厚/ゴージャス
Copperplate Gothic(例えば高級エステサロンのgroval navigation部分に。)

■エレガント(ロゴや広告に女性らしい雰囲気づくりがしたい時に。)
Script系

■CaslonやGaramondより、少し近代的な印象
DidotとBodoni

********サンセリフ********

■モダン
Futura(これもgroval navigation部分によく使います。)
Helvetica★
Swiss(種類が多くて使いやすい。)★
Arial★

★はHelveticaから派生した兄弟なので、似ています。

■ヒューマニスト(サンセリフに少し変化をつけた人間味のあるフォント)
Optima
Frutiger
Trebuchet MS
Verdana
tahoma
*******その他********

■子供向けに良い
Comic Sans
Cooper Std

 

~フォントのスタイル~

基本的には何もしないノーマルなのがキレイですが、
電話番号など、文字間は狭く、文字サイズをおおきく大きくしたい数字にはCondensedを使っています。
斜体はDTPデザイナの時代に上司に、ダサくなるので使わないでと言われたので今でもほとんどかけないです。

0

視認性を高めるには

こんばんは!

見習いデザイナーのNです。

デザイナーを目指している中で様々なことを日々教わっていますが、

本日は「視認性」について私が説明させて頂きます。

○視認性とは?

まず、視認性とは形や物が背景に対して見やすいことを言います。

例で言うと「視認性が高い」または「視認性が低い」と言われています。

視認性が低いと言われてしまった場合は、視認性を高くするためにデザインを変えな
くてはいけません。

例えば以下のことをすると視認性が高くなるときもあります。

○「背景」と「物」の明度差を高くする。

○写真に柄や色が多い場合には写真のトーンを調節、あるいは「背景」と「物」の間に
色をはさむ。

○「物」に効果で影や光彩をつける。

などがあります。

視認性が高いということは見やすいということなので、こういった点を

気を付けるとデザインがもっと見やすくなる、分かりやすくなるということですね。

また、学んだことがあれば随時あげさせていただきます。

それではー

0

スマートフォンのタイポグラフィで注意していること

小さくて読みづらいスマートフォン向けサイト。

本文の行間を広めにしてあげます。

カンバスサイズ幅640pxの場合の作例です。

フォントサイズ28pxで行間50pxにしてみました。

名称未設定-1_02_02

また、h2 ? h3のジャンプ率もPC版より意識的にくっきりとさせます。

 

 

 

また、サイトの印象のクオリティを上げたい場合は見出しのアイコンをフォントの「■」ではなく、画像にします。

上の黄色い四角以外にも例えばこんなのを作ってみました。

名称未設定-1_06

 

ちなみに、文字の背景のcss3グラデーションは、

http://css3button.net/で作成したCSSのコードをコピーしてcssファイルを別途作成し コーダーさんに「参考として」デザインpsdと共にお渡ししています。

 

 

行間を開けるとどうしてもページがタテに長くなりがちです。対策として「ページ上部に戻る」リンクをフッターにつけるようにしています。

▲PAGE TOP

Page↑Top

BACK TO TOP

TOP  …などもOK、です!

0

レタッチについて#01

お客様からお写真をいただいたときに

ちょっとした小物を消したいという場合があると思います。

そういった際に使うと便利なツールを紹介します。

○スポット修復ブラシ・・・これはブラシのように固さや直径が選べて、画像によってはこれ一回だけで綺麗にレタッチが可能です。

○スタンプツール・・・これは大きさが調整可能で、コピーしたい模様などの上でaltを押すとそこの部分をコピーし、他の部分へスタンプのように押すことが出来ます。

○パッチツール・・・スタンプツールとは違い、選択した範囲をドラッグさせて置き換えたい色の場所で離すと、そこの色を持ってくることが出来るツールです。

大体上の3つが良く使われますが、木目やたくさんの模様がある場合などは、

似た色の箇所を選択しコピーしたものを貼り付けて、少しはみ出た不要なところを

消しゴムのブラシで少しずつ消すと、自然にレタッチが可能です。

これとスタンプツールを合わせると、とても綺麗に出来ますが、

デザイナーは時間内に仕上げなければならないので、時間短縮するには一番は

「スポット修正ブラシ」を使うのが早いと思われます。