0

中性色でまとめる配色

 

ホームページ制作における
緑や紫などの中性色で配色をした際のポイントや効果について

説明します。

 

中性色で独特な雰囲気を出す配色方法

 

●ポイント
中性色は寒暖や男女らしさのイメージがつきにくく、不思議なイメージを
与えます。
明度の高い組み合わせだと、軽さが出るので比較的他の色にも合わせやすい
ところがあります。
また、彩度が高いとミステリアスなイメージを与えます。

 

紫でまとめると優雅で上品、大人の女性をイメージさせます。
緑でまとめると癒しや、落ち着いたイメージになります。

 

最後に紫と無彩色(黒、白、グレー)を合わせるとクールに見せたり、
モダンに見せることも出来ます。

 

ホームページ制作で中々こういった色を使うことは少ないかも
知れませんが、こういった配色もあります。

0

室内写真の画像補正をする

室内写真の画像補正をする

ホームページ制作やDTPで、撮影した写真をそのまま使用できる時もありますが
下準備が必要なこともあります。今日はインテリアの補正についてです。

 

まず、全体を見て見栄えが良くないもの(ゴミや段ボールなど)が写っていたらチェック。スタンプツールで消します。

次に…室内は暗くなりがちです。
いらない物が消せたらトーンカーブで全体を明るくします。

さらに印象を明るくするために、小物の色彩だけを選択し、鮮やさを強調すると
全体の印象まであかるく見えます。

例として植木の緑をイキイキとさせる方法です。

先輩から聞いた早いやり方を紹介します。

名称未設定-1

補正したい所を長方形選択ツールで適当に選びトーンカーブをクリック。

上に引っ張って全体を明るくします。

名称未設定-6

Rだけを減らすと緑が強くなります。

名称未設定-8

Bをこの方向に引いて黄色を足すと黄緑っぽくなります。

名称未設定-7

マスクしてある所を消しゴムのブラシで葉っぱのカタチに合わせて消します。

名称未設定-9

丁寧に作業していくと、、、全部葉っぱのカタチが鮮やかな緑になりました。

名称未設定-10

0

モノクロにして色を強調する方法

 

ホームページを制作するときのデザインについて、
目立たせたい箇所をカラーにし、他の箇所をモノクロにすることで
そこのカラー部分が強調される法則について説明します。

 

モノクロにして色を強調する方法

●モノクロ画像の特徴について
モノクロの画像は彩度よりも明度で表現する分、カラーよりも
情報量が少なく、やや抽象的な印象になります。
モノクロの一般的な特徴としては
時代感を出したり、まるで時が止まっているような感覚を
見る人に与えます。
また、被写体によっては知的で芸術的な印象を与えます。

 

●一部分のみカラーを残して、モノクロにする
色を強調するうちの一つとして、一部分のみカラーを残し
ほかをモノクロに加工することで、カラー部分が浮き上がり
ドラマチックな印象になります。

 

色を多く使用すると、悪い言い方ではありますが雑な印象に見えることがあります。
そういったときに、上記の方法を行うことで印象が落ち着き、
文字や素材が配置しやすくなります。

ホームページ制作をしていく中で、配置について悩んだりした際は
この方法もぜひ、視野に入れてみてください。

0

ドロップシャドウの法則

itaku_03

これはあるホームページの一部なのですが、いくつの影が使われているでしょうか

 

矢印の所など、ホームページの中にたくさんありますね。

itaku_04

 

 

左からです。厚みのあるシールに見せる光です。

下のはがれているところは下に少し広く、ふんわりした影にします。

メールアイコンの影は、シールの影と少し役割が異なります。下地のオレンジから視認性を高めるために、濃い色を「光彩」で2pxくらいかけました。

ホームページ制作における視認性について書いてある投稿へ

不自然にならないよう、オレンジ系の光彩にするのがポイントです。

 

ホームページで読ませたい赤い電話番号の光。これは、レタープレスエフェクト風に制作しました。

スマホの方はタッチでコールの噴出しの影、これは他の箇所が上から光が当たっているので、「べベルとエンボス」はもちろん下にかけます。

影の方向が、バナー内でこっちの文字は上から、こっちの文字は下から、あるいは横から…とバラバラにならないように。さらに、ホームページ内でも、方向は統一した方がいいです。

最後に、このプレート自体の下側にもさりげなく、影が付いています。

プレートも、真ん中の方が少し薄い色になっていて、金属みたいな質感にしています。

影を繊細に付けてホームページ制作をすると、品質が良く見えます。

 

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

可読性について

こんばんはー

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、です!