誰かに見てもらうための、簡単なデザイン

ブログをリデザインしました。コンセプトや参考にしたものなど。

ブログのリデザインをしました。といっても前のイメージを残しつつ、ちょろちょろ変えたって程度で、大きくは変わってないんですけど。
実は人生で2回めのWebデザインだったりします。1回目は前のブログのデザイン。普段紙デザイン主体なので、Webデザインをする機会はあまりないですし、Web系の実務経験もないので、本見ながらアワアワとやっています…(;´∀`)
そんな状況なのですが、今回のデザインをするにあたってのコンセプトや参考にしたものを紹介します。

kandeza_renew1_sc

WordPressで作ってます。

このブログはWordPressで出来ています。全体のデザインはPhotoshopで作って、その中から画像をスライス機能で切り出して、WordPressで組んでいっています。
私はHTMLとCSSがちょっと分かる程度…なのですが、この本の通りに組んでいって、今のブログが出来ています。

私でも出来るんだから、きっとやりやすい本なんじゃないかな…と思います。有名どころですしね。

リニューアルのきっかけ

ホームページって、ただ見た目がいいようにデザインするだけじゃなくて、使いやすさ、分かりやすさも考えてデザインしないといけないんですよね。
紙は見るだけだけど、ホームページは実際操作するもの。そして、印刷ではなく画面で見るもの。
紙と画面では見え方が違う。だから紙とはまた違った考えでデザインしないといけない。
この辺をよく理解していないのがこのブログの運営者でございまぁす(・∀・)☆

…と、まぁ、こんな感じでして…どうしても紙ベースで考えてしまうし、しかし考えたデザインをWeb上で表現するだけの力もなく…そんな感じでやっていて、なにか問題があっても対処が難しかったのですが、ブログを公開して、とりあえず直したいところが出てきました。

視認性の問題

後でも触れますが、このブログのデザインコンセプトは「旅先のリゾートホテル風」だったりします。前回も今回も同じです。え?そんな感じがしないって?すみません…(´・ω・`)
なので、壁をイメージしたベージュ色と、海や地平線を感じさせる水色をメインに使っていたのですが、これが…視認性が悪かったんですね。

21_before1

前のデザイン。壁にぺっとり塗ったような水色のペンキ的なデザインとこの色が気に入ってたんですが、今も気に入ってるんですが、視認性はというと…

21_before2

Chrome拡張機能の話の時に紹介した(un)clidなどで、画面を白黒にしてみると分かるのですが、文字部分…薄い…ちょっとチカチカして見難いですよね。
気に入った雰囲気ではあるんですが、明るい色×明るい色の視認性は、見る人に優しくないかな…と思って、まずここを変えようと思いました。
しかし、メインに使ったベージュも水色も綺麗な色で、変えてもどこかに使いたいとは思っていました。

あとは、ブログ本文の幅をもう少し広めに取りたかったのと、ヘッダー(タイトル部分)が大きかったので、小さくしたい…などなど。でリニューアルをば。

コンセプト

このブログは「誰かに見てもらうための、簡単なデザイン」というコンセプトのもとやっており(そうだったんだ!)、デザインを全く知らない人や、初心者の方に読んでもらいたいなぁなどと思っています。
それを踏まえてデザインコンセプトを考える時に、リラックスして見てもらえるような感じが良いかな、と思いました。
リラックス…リラックス…リゾート(・∀・)!とまぁこんな感じでリゾートホテルみたいな感じにしたわけです。前のデザインも、このコンセプトがありました。

リゾートホテルって…デザインとか初心者とか関係あるの?ねぇ?と思わなくもないです…が、バリバリ「初心者向け!」「勉強!」みたいな感じにはしたくない&流行りのファッションや雑貨にあるようなオシャレ感が欲しかったんですよね…。
最近はパンケーキブームもあってか、ファッション誌などではハワイ特集などがよく組まれていますし、ハワイにインスパイアされた雑貨や服もちょこちょこ出ています。
こういう感じを汲めればいいな、と思って、ヘッダーに椰子の木、フッターにヨット、サイドバーに海外の景色を窓的なイメージで置いてみました。

21_blog-redesignimg

写真は全て、Photoshopでちょっと色あせた風?に加工しています。写真をそのまま使うよりは、ちょっと淡い感じで、看板のようなペイント風がいいかな…と思ったので。
ホントはルームキーとかなんとか、もっとホテルにありそうな小物を入れても良かったんですが、あまりゴチャゴチャするのもアレかな…と思ったのと、ゴチャゴチャさせるだけのWebテクニックがないのでやめました…後者の方が意味合いが強いかもです…。
ちなみに、この写真加工をするにあたって参考にした本はこちらです。

ちょっとバージョンが古いかもしれませんが、十分使えますし、色んな手描き風効果が載っていて楽しいですよ。姫路市立図書館で借りました(誰得情報…?)。

参考にしたサイト

参考にしたサイトのご紹介。といっても3つだけ…。

メゾン・ド・リーファー

Journal_a_Reefur

Journal a Reefur | Maison de Reefur
梨花さんのブランド、メゾンドリーファーのブログ。新聞風、そしてタイポグラフィ。色数は見ての通りのほぼ2色…。この色数でまとめるがこそ引き立つタイポグラフィ。
カラーペーパーにインクで文字を書いたような感じが気に入ったので参考に。

unico

unico_cap

≪unico≫オンラインショップ:家具/インテリア/ソファ/ラグ等の販売。
大好きunico。家具屋さん。最近引越しした時に頻繁に足を運びました。Webサイトだけではなく、カタログとかPOPとかもじっくり見ましたよ。
良いなと思ったのがアクセントカラーの黄色の使い方。明るい黄色がぱっと目を引きます。これくらいの明るい黄色は多用すると見にくいし、白と一緒に使うとチカチカするので、敬遠するデザイナーさんも多いんじゃないかなぁ…と思うんですが、unicoのサイトはそれをババーンと使っている…ので、おおお!なんか新しい!と思ってしまいました。

unico_maincap

インテリアショップ unico | ブランドサイト
黒×黄色って、遮断機みたいで超目立つ色の組み合わせで、かなりウルサイと思うんですが、それを茶色や緑といったアースカラーで落ち着いた雰囲気の写真と組み合わせているのが衝撃的でした。全然違うじゃないですか。
合わせると綺麗、というわけではないかもしれませんが、インパクトがありますよね。手書きのラフ感や家具のオリジナリティも合わさって、とても個性的な感じがします。
これを見て、黄色の使い方を考えさせられたので、今回のデザインにも黄色をちょっと採用。記念採用。

洋色大辞典

yoshokudaiziten

世界の伝統色 洋色大辞典 – Traditional World Color Names
コンセプトが「旅先のリゾートホテル風」なので、色は海外風に、洋色でまとめようと思いました。
このサイトは和色も洋色もまとめられていて、色の名前やコードも紹介されています。
色の名前が…カワイイ…!!以前のデザインで私が多用していた水色は「ホリゾンブルー」という色で、地平線の青とか…なんかカッコイイじゃないですか…!!色もネーミングも気に入って採用しました。

青1つとっても「ケンブリッジブルー」「サマーシャワー」など、カッコイイ名前が色々ついています。
こんな名前を見ているうちにモエモエしてしまって、自分を抑えるのが大変でした。
その中でも「ピンクアーモンド」という色が、色も名前も気に入ったので、ヘッダーのリボン部に採用したり。
お世話になりました。

デザインについてはこんな感じです。機能性についてはまだまだ勉強中です…。色々やりたいんですが、Webって難しい…。
なんか不具合があるかもしれません。あったらすみません…教えてください…。
デザインも機能も、またちょこちょこ変えていったりしたいと思っています。できるかな?

こうやってゆるゆるとやっていますが、これからもよろしくお願いして頂けると嬉しいです(*^_^*)♪

それでは!Have a nice design!