ホームページ制作まん

デザインの最近のブログ記事

Photoshopの技を磨く。

user-pic


neon_lights_photoshop.jpg
画像にネオンの曲線や、光の効果を加えると写真がかなりかっこよくなります。
挑戦しようと思ってもなかなか難しいと思います。
ただ、本気でやりたいと思っている人は是非ここで勉強してみましょう。
英語のサイトですがわかりやすくチュートリアルで書いてあるので、やりながらCGデザイナー気分が味わえて
さらには全部達成すればかなりのスキルアップになるでしょう!おすすめです

Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects

アイデア倉庫

user-pic

MephoBox

http://box.mepholio.com/

map.png

WEBデザインをしていていつも苦しませられる「生みの苦しみ」

発想が尽きたあの焦燥感なくるしいです。

そんなとき助けてくれるこのサイト。

様々なデザインがヘッダーなどのカテゴリわけされて
インスピレーションを刺激します。

困ったときには他の作品をみるのもいいと思います。

ユーザビリティ

user-pic

WEB制作をする上で切手も切り離せないユーザビリティ。
このサイトでも何度もご紹介していることです。

少し古い記事ですがWEBページを見る人の目の動きを検証した記事を見つけたので
ご紹介します。

http://www.useit.com/alertbox/reading_pattern.html

人の目は「F」の字を書きながらページを見ていきます。


これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうです。


その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描いていく。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。


第1段階:
訪問者は最初にページの一番上のコンテンツエリアを水平に視線移動させる。これが「F」の一番上の水平ラインになる。

第2段階:
次に訪問者はページを少し下に向かって視線移動させてから、再び第2の水平移動をする。この第2の水平運動は最初の水平運動よりも短い。これが「F」の字の上から2番目の短い水平ラインになる。

第3段階:
最終的にユーザーは左サイドから垂直下方向に向かってページをスキャンするようにして視線移動させる。時折ゆっくりとした速度で、そして機械的に見ていくとのこと。中にはまだら状に視線移動させる人もいるとのこと。いずれにしろ下方向に移動するので、これが「F」の最後の要素になります。

なお、この図の色は何を示しているかというと、最も見られているのが赤色、次が黄色、最小が青色。全く見られていないのが灰色とのこと。

結果、累計パターンとしてはコンテンツの内容によって大体以下の3パターンに分類されるらしい。


パターン1:記事
me1.pngのサムネール画像


企業のウェブサイトにある会社概要や一般的な記事の場合がこの画像のパターン。典型的な「F」パターンです。

パターン2:製品ページ
me2.png

これもF字のパターン。一番上のタイトルを見てから製品写真を見て、あとは説明をざっくりと見ているようです。

パターン3:検索結果
me3.png

各検索結果のタイトルを見ていくわけですが、トップページの上位しか見ていないことがわかります。


WEBで調べ物をするときなどは自分がほしい情報を見つける為にかなりのページを見ると思います。
そのなかで自分にマッチングしたものしか集中的に見ないと思います。

ページ構成を考える際、見せたいものを効果的に配置すること、重要です。

近似色の特徴

user-pic

先日は補色についてお話しましたが、今日は「近似色」について。

補色は色相環の反対側の色でしたが、「近似色」はその名の通り、基本的に色相環で近い色となります。

siki.jpg

近似色を使うメリットとしては、「色調が整う」「見た目の統一感が出る」などですが、「目立たなくなる」というデメリットもあります。

なので、近似色で構成するとき、たいていの場合は補色やそれに近い色などを織り交ぜてアクセントをつけるのが基本的です。

1.png
近似色の例

2.png
補色(の近似色)例


もちろん補色にこだわる必要はなく、違和感のない色であれば織り交ぜていくが良いでしょう。

ただしその場合も色の使い過ぎには注意です。

色を使いすぎると、キーカラーが何なのか分かりずらくなり、バランスも崩れてしまいます。

トータルバランスを見て、色を使うようにしましょう。

web制作での補色の使いみち

user-pic

また色関係のお話です。

webデザインに関わる方々の間では、「補色」というのをご存じの皆さんも多いかと思います。

この「補色」というもの、これは何かと言いますと、

「色相環で反対側に位置する色」です。

ちなみに「色相環」はこちら。

siki.jpg

RGBでは、混ぜると白になる色ということらしいです。

サンプルはこちらです。

hosyo.jpg

見てわかるとおりですが、コントラストの対比がハッキリしていて、まさに「反対側の色」ですね。

この補色には、互いを強調しあう効果があるそうです。

外でよく見かける看板などにも使用されていることは多いです。

web上では片方の明度などを調整して、より見やすく(目に痛くない程度)で配色されているのをよく見かけます。

ただし見やすい配色ではありますが、無計算な多用は危険のようで。

いつでもそうですが、ベストなタイミングと場所で使っていただけると効果大だと思います。


* *
* *


ホームページ制作まん

アイテム-ホームページ制作まん

  • neon_lights_photoshop.jpg
  • viru1.png
  • WS0009.JPG
  • toi7.png
  • toi6.png
  • toi4.png
  • toi5.png
  • toi3.png
  • toi2.png
  • tol1.png

ホームページ制作会社


栃木県パソコン修理/パソコンのお医者さん
ホームページ制作 デザインチャンネル

SEO/SEO対策

Yomi-Search Ver4.21  

ページランク表示ツール

ホームページ制作LINK

このアーカイブについて

このページには、過去に書かれたブログ記事のうちデザインカテゴリに属しているものが含まれています。

前のカテゴリはツールです。

次のカテゴリはトラブルです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。