フリーランスデザイナーが自由なライフスタイルを実現するための新しいブログの活用法や個性的がほとばしるブログにするためのPhotoshopを使ったデザインのチュートリアルなどを公開中~。

ブログを始めたばかりの初心者でも一瞬にして個性的がほとばしるカッチョよいポートフォリオやギャラリーサイトにすることができる”たった3つの意識”

photek-img8

WordPressでカッチョよいブログを作りたい、と思いデザインレベルの高いテーマを選んで適用させてみたけど「想像どおりにいかない・・」「どーもイメージが違う・・」といった経験をする人も多く、そこで「私はセンスが無いからしょうがない・・」と諦めてしまう人もいるようですが、それはとてももったいないこと。。

なんとなく世の中では、【センス=おしゃれ度合い】といった風潮があるように思いますが、検索してみれば【センス=物事の微細な感じをさとる心の動き】と出てきます。センスはもともと誰もが持っているものなので、自分の心の微細な動きに気づいてあげることが大切なようです。

そのため、ただなんとなく画像を選んでブログに貼り付けるのではなく、ひとつひとつの写真や全体から受ける視覚的刺激によって、自分やそれを見る人がどのように感じるか?を感じ取りながら写真を選んでみるようにしましょう

美しいものには理由がある

直感的に美しいと感じるものには必ず理由があります。「ハイセンスなプロのデザイナーが写真を選ぶ際に何を意識しているのだろう?」とTCDワードプレステーマのPHOTEKを観察していたら、ふと私なりに3つの解釈が生まれてきました。

PHOTEK (tcd024)
販売元デザインプラスデモサイトを見る
価 格9,980円(税込)
形 動レスポンシブ対応
特 徴ポートフォリオ

①:日本特有の写真と、日の丸を彷彿させるビビットな”赤”を採用することで、説明文がなくても日本・和・JAPANといったコンセプトがあることを無意識のうちに受け取ることができます。

②:色彩豊かで鮮やかな写真(ひとつひとつ調整されているかもしれません)からは、過去への執着ではなく、伝統を大切にしながらも現在から未来へ進んでいく強い日本を象徴しているようにも感じます。

③:1枚1枚の写真を視覚的に受けとったときのかすかに振れる自分の感情の動きに意識を向けることで、どういったものに対して美しいと感じるのか、どんなことをしている時に楽しいと感じ、どんなシチュエーションのときに切なさを感じるのか、そういった他の人とは違う独自の感じ方を表現することによって個性が生まれ、それをセンスと呼ぶことに気がつきました。

  • ① コンセプトカラー
  • ② トーンの整合性
  • ③ 感情の振れ方

ここでは、カッチョよいポートフォリオやギャラリーサイトに生まれ変わらせるための”3つの意識”を元に画像を選択する方法を解説しています。きっと1時間もあれば今までどうやってもパッとしなかったブログが、一瞬にしてあなたのセンスがほとばしる個性的なブログに生まれ変わらせることができると思います。

今回使用した画像素材サイト

photo01

photo02

photo03

① コンセプトカラーを1つだけ決める

コンセプトカラーを一色決めるだけで全体の印象を決定するほどの視覚効果があるので、あえて構図や画質、コントラストがバラバラなものを選び、人、物、動物といった素材感の違うものを並べていくことで、動きのある(ユーザーの視線やサイト自体の存在感など)個性的なブログになります。

逆に右側のよう《緑=自然》という認識に従って、草原と空(それ自体がコンセプトなら良いのですが・・)といった同じような構図のものだけを選んでしまうと、なんだかまとまり過ぎて動きがない印象を受けます。

ちょっと極端ですが、コンセプトカラーが決まっていれば、どんな画像を選択してもイケてしまうと言って良いと思います。

ピンクバージョン

photek-img3

② トーンの整合性を意識して調整する

ランダムに素材を選んだ場合や自分で撮った写真を使いたいときなど、1枚1枚の画像の質は高いのに全体的にチグハグな印象を受けてしまうことがあります。

photek-img4

このように、なんとなく統一感が無いと感じるときには、トーン(明度と彩度)の違うものが混在してしまってる可能性があるのでよく観察してみましょう。

photek-img7

赤、黒、緑といった単一的なコンセプトカラーを決めず、さまざまな色彩の画像を採用したい場合には、互いのトーン(特に彩度を意識して)を近づけることで統一感が生まれてきます。

photek-img5

これは、鮮やかでクリアなイメージほど現在(もしくは未来)に感じ、くすんだイメージほど過去(記憶)の中の映像のように感じるため、時間軸を調整している作業とも言えるかもしれません。

1枚1枚の画像を少しアレンジしてレトロ感を出すのも面白いかも。photoshopを使用することで簡単にレトロ感を出す方法をLIGさんが解説してくれているので参考にしてみます。

Photoshopで簡単にレトロ感を出す方法

アレンジしたい画像をphotohopで開きます。

retro1

新規レイヤーを作成して、鮮やかな青で塗りつぶす。続いて描画モードを《除外》に変更して、不透明度を40%程度に調整すると、「すごいっ!」これだけですでにレトロ感が出てきました。

retro2

もう少し印象を加えたいので、レンズフィルターの調整レイヤーを追加して適用量を調整。続いてレベル補正の調整レイヤーも追加してニュアンスを調整。

retro3

最後に、色相・彩度の調整レイヤーを追加して彩度を少し落として完成。

retro4

レトロ感のあるポートフォリオサイトができました。(ここではちょっと極端にやり過ぎてしまいました・・、実際に自分でトーンを調整する際には、もともとの写真良さを壊さないようにチャレンジしてみてください。)

photek-img6

③ 自分の感情の振れ方に意識を向ける。

人の感情には、楽しい、悲しい、嬉しい、苦しい、むかつく、切ない、不安、ワクワク、といった簡単に言語化できるものがありますが、実際には楽しいと悲しいが入り混じっていたり、もっと複雑で奥が深かいものだったりするのでなかなか言葉で表現するのは難しいものです。

でも、感情のベクトル(方向性)はなんとなく知覚することができるので、例えば、「一人でグフフっとテンションが上がってしまう感じ」といった、微妙な感情を自分なりの言葉に置き換えて画像を選んでみると、色やジャンルとはまた別の独自のゲシュタルトが表現できます↓

photek-img8

(※無料素材を使用する場合でも、自分の作品であるかのような表現はしないようにしましょう。あくまでも独自のコンテンツありきだということ忘れないようにしたいですね。)

また、「理由はよくわからないけどなんとなく切なくてキュンとしてしまう感じ」といったかすかに振れる自分の感情の動きに意識を向けて画像を選んでみれば、このように同じ人間が選んでもまったく違う印象のブログにすることもできます↓

photek-img11

ここで解説した3つの意識、① コンセプトカラー② トーンの整合性③ 感情の振れ方はポートフォリオやギャラリーサイトに限らず、さまざまな場面で活用できると思いますので、応用しながら実践に役立ててみてください。