0

SEOに配慮したデザイン

Web制作でデザイン担当者がSEOを意識した場合、できることについてです。

 

・スライスの書き出し品質は抑え目に。jpg80以下にする。(離脱率を下げ、クリック率を上げるため。クリック回数=SEO上昇)

 

・トップページにSNSが複数リンクされているデザインはNG

seo狙いでフェイスブック、アメブロ、twitterなど複数のsnsをたくさん不自然に連動するのはペナルティになりやすいです。

アメブロは商用利用不可になったそうです。ベストなのは ワードプレスで独自ドメインで作ったブログ一個にすること、もしくはgoogle plusひとつに絞ること。

 

・下層ディレクトリの名前をローマ字にする。英語じゃなく、読みを日本語にする。goaisatsu.html oshinagaki.html gakkou.html menyu.html …

 

・一つのドメイン内で、内部リンクが出来るような文章にするとSEOが強化されます(Wikipediaのようなイメージ)

 

・10年前に作ったキャンペーンサイトなどは、放置しておくと他に悪く影響します。要らないものは消しましょう。

0

色面積で印象を強くする

色の面積を大きくして形をよりはっきりと見せることで、力強い印象になります。

 

色面積を大きくして、力強い印象にする

 

ホームページ制作のデザインにおいて、デザインにメリハリをつけるために
ある箇所を強調したいときがあります。
そういったときは、色ベタの面積を多くすると力強い印象になります。

 

注目させたい部分には大きな面積を配置することも効果的です。
例えば、タイトル部分に大きな色面積を使用すれば、そこに視線が集まり
目立ちやすくなります。

 

また、少し話がそれますが、
そこの近くに同じ色の小さな色面積を配置すると、大きなものと比べて
色の濃淡が異なって見えます。
大きな色面積は本来の色よりも「薄く」見えます。
小さな色面積は本来の色よりも「濃く」見えます。
これを「面積対比」と言います。

 

※色ベタとは
指定した範囲に濃淡をつけずに、色をおくこと

 

0

photoshopでフォトレタッチ(肌の修復)

20130610135458mae

写真の修復は、絵画の修復のようなイメージで取り掛かっています。

使うのは主にphotoshopのスタンプツールです。

人の肌の修復はもっとも難易度が高いです。グラデーションが細かいので、

丁寧に少しずつしないとキレイに消せません。

簡単なのは、草や柄の無い布、ですね。ホームページ制作ではこのような作業が意外に多いです。

まず、やりやすいほっぺたや背中はパッチツールかスタンプツールで肌をコピーし

傷を消していきます。↓大体消した所

?スタンプのみ

 

さらに目立たなくするために、

指先ツールでぼかします。

ぼかし

目の所はエアブラシの不透明度:例えば20%にしたもので描いていきました。

pixcelレベルにズームアップし、修復したら→ズームアウトして観察をマメに繰り返していきます。

目じりの影の紫色やまぶたの肌色をピクセルの■一個一個がら取ってきて、周りの色と同じ色になるように塗ります。

め

できました。

20130610135458

0

共通色を使った表現

■ホームページ制作時のデザインにおける配色について説明します

 

共通色を上手く使った表現方法

 

コンテンツの内容が豊富で要素が多く、全体がごちゃごちゃしてしまった・・・
そんなときは離れた場所に同じ色や同系色・類似色を配置することで全体が
まとまりやすくなります。

 

ここでポイントなのは、近い場所ではなく、離れた場所かつ
大きな色面積と、小さい色面積を組み合わせた方が効果が
出るということです。

 

これらを上手く活用することで、全体がまとまり、
引き締まった印象を与えることが出来ます。
また、色面積を大きくすると力強く活気のある印象を与えることも出来ます。
こちらに関しては、また次回に説明させていただきます。

 

0

コンセプトから配色用カラーパレットを自作する

Web制作のカラーリングの方向性を決める時に、無限の色の中からでは迷うことがあります。

CSS niteの勉強会で習ってきたオリジナルのカラーチャートの作り方です。

Kularのパレットは便利で有名ですが5色くらいなのでもう2、3足りないことがあります。これならカバーできます。

 

クライアントから寺をテーマにしたサイト依頼があったとします。

寺から落ち着き、緑の豊かさ、静謐、伝統などのキーワードを派生させ、イメージを膨らませます。

写真を集めてphotoshopで切り張りします。

tera

photoshopフィルタのモザイクをかける。細かすぎず

大きすぎずの所で調整するのがポイント

parette

必要に応じて、トーンカーブでコントラストを付けて明るさだけ調整してください。

地味な中に、差し色が入った結果となりました。

これを知る前まではただ茶色や緑の重みのある色をそれらしく並べていたと思いますが、

全体を引き締める差し色の役割が大事だと学びました。

 

0

中性色でまとめる配色

 

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

説明します。

 

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

 

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

 

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

 

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

 

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

0

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

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

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

 

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

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

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

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

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

名称未設定-1

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

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

名称未設定-6

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

名称未設定-8

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

名称未設定-7

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

名称未設定-9

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

名称未設定-10