Lopan.jp

Lopan.jpをリニューアルしました!まずはごあいさつ。

old Lopan

はじめまして、「_watercolor」と申します。アンダーバーウォーターカラー(under score watercolor)と読みます。2年ほどDTPした後、Webデザインへ転職してはや6年…。おかげさまでWebにはめっぽう詳しくなりました。そんなわけで、今までWebの仕事を通じて培ってきたいろんなものを一旦、頭から出して整理したいなと思い、サイトリニューアルする事にしました!
如何せん不束で読みづらい文章になってしまいがちですが、そんな時は、そっとご指摘いただければ幸いです。
よろしくお願いします!

リニューアルするにあたって、やったこと

さてではさっそく、リニューアルするにあたってやった事の整理です!一人インタビュー形式で恥ずかしい感じでいきます。

なんのためのリニューアルですか?

冒頭でも書いたように、今までWebデザインの仕事をさせていただいてきた中で得た、技とか知恵とか身についた事を、頭の片隅や感覚だけに留めておくだけじゃなく、文章やら図やらにまとめて、ブログというカタチで残していきたいなーと思ってました。
なので第一に「自分のため」って事ですね。まずは自分の頭の中を整理して、自分が今できる事できない事、今後やってかなきゃいけない事をはっきりさせる、のが目的です。そしてゆくゆくはそれをちゃんと他の人も分かるようにまとめて、書籍化!とか。ね…まぁ。

リニューアルにあたってやった事はありますか?

旧Lopan.jpにもブログはあったんですが、ギャラリーサイトに併設した徒然ブログだったのもあって、あまり真剣にブログしてませんでした。ですが、今後はがっつりブログしてゆくつもりなので、ギャラリーやその他余計なページは取っ払ってブログのみにし、デザインとかサイトの構成を、よりブログらしくしてみました。
今回はWordPressを使ってサイトを構築しようと決めてたので、主にWordPressを使って作られたサイトを見て回って、レイアウトとか参考にさせていただいてます!

だいたいこんな感じですよね?

よくあるブログのレイアウト

とはいったものの、始めたばかりで記事も無いからサイト内検索とか要らないし、カテゴリもタグも一覧にするほどないし、「ページネーション」も…って要らないものをジャンジャン削っていったら、…記事カラムしか残りませんでした!…(´□`;)

新Lopan.jp

まぁ、初めはこんなもんですよね。必要になってきたら、徐々に追加していくつもりです。ただ、ヘッダーがあまりにも寂しかったので、結果が分かりきっているサイト内検索だけ設置しました…。のちのち何かを乗せていこうと思います。

アウトラインはこんな感じになります。

HTML

<div id="wrapper">
<header>
  <h1>ロゴ</h1>
  <div id="box">
    <form id="searchform">サイト内検索</form>
  </div>
    <ul>
    <li><a href="">Facebook</a></li>
    <li><a href="">Twitter</a></li>
    <li><a href="">Feed</a></li>
  </ul>
</header>

<div id="contents">
  <div class="main">
    <p class="date">2012年01月04日 水曜日</p>
    <article>
      <h1>記事タイトル</h1>
      <ul class="tags">
        <li><a href="">カテゴリ</a></li>
        <li><a href="">タグ</a></li>
      </ul>
      <div class="wp_social_bookmarking_light">ソーシャルボタン</div>
      <p>記事本文</p>
    </article>
  </div>
  
  <aside>
    <section>
      <h2>Recent posts</h2>
      <ul>
        <li>記事タイトル</li>
      </ul>
    </section>
  </aside>
<!-- /#contents --></div>

<footer>
  <section id="contact">
    <h2>当サイトについて、お気づきの点などございましたら下記からご連絡ください。</h2>
    <form class="wpcf7-form">お問い合わせフォーム</form>
  </section>
  <section id="about">
    <h2>About me</h2>
    <p>自己紹介</p>
  </section>
  <ul>
    <li><small>Copyright © 2012 Lopan.jp All Rights Reserved.</small></li>
  </ul>
</footer>
<!-- /#wraper --></div>

デザインするにあたって、やったこと

いつもはPhotoshopでしっかりガッチリ作り込むんですが、このリニューアルではPhotoshopではほぼ素材だけを作る感じで、レイアウトはブラウザ上で組んでいきました。まだWordPressに慣れてないため、ソースがどうなるか予想つかなかったので、WordPressから一旦ソースを吐き出してから、それに合わせてデザインを盛っていく感じで進めました。

リニューアル後のデザインのポイントはどこですか?

background

水彩な背景です!

またの名を_watercolorにしてるくらい、水彩絵の具に目がない僕なので、背景は前回に引き続き一面水彩で!と決めてました。水彩絵の具の「にじみ」が大好きで、いい感じのにじみを見つけるともう、半日くらいは眺めていられます。にじみが多用された絵画やイラストにも目がないです。
素材は旧サイトと同じものを前回より小さめ&濃いめに使用して、網点とストライプを入れて今風(?)ぽくしました。
まず一面水彩の背景を置いて、背景基準でデザインを固めていきました。

レイアウトは割とスタンダードですが、こだわりのポイントはありますか?

レイアウトに関しては、他所様のWordPressテンプレートを参考に組みました。
横幅はキリよく1000pxぴったりに決めて、カラムの幅は美しい比率を参考にしてみました。
「1:√2」という比率で、最近までこっちが「黄金比」だと思ってたんですが、こちらは「白銀比」というんですね。けど、日本ではこちらの方が主に使われているらしく、法隆寺とか、五重塔にもこの比率が見られるそうで、大和比とも言うそうです(@wikipedia)。また、紙の寸法もコレですよね、A4(210×297)とかB3(364×515)とか。

そんなわけで、メインカラムとサイドカラムを白銀比で分割しようと思うんですが、こちらの計算には「web計。」という便利なサイトを利用させて頂きました!
結果「707×293」となったんですが、間にマージンがいるので、メインの方を707pxとして、サイドは245pxにする事にしました。
サイドの幅はLike Boxを鑑みて決めました。今後たぶんLike Boxもサイドカラムに設置すると思ったので…。
Like Boxでは、横幅237pxにした時にちょうど顔写真が4つ並ぶ最小サイズだったので、それに両脇10pxずつマージンを入れたいと思うと(※Like Box内で既に両脇5pxパディング+ボーダー1pxがあるので、残り両脇4pxずつのマージンで良いとすると)、237+4×2=「245px」。これがLike Boxをいい感じで収納するジャストサイズ!となりました。
※Like BoxのページにはThe minimum supported plugin width is 292px.とありますが、…まぁ仕方ないでしょう。Facebookさんごめんなさい!

フォントの指定について、特に気をつけた事はありますか?

フォントは、こちとらMac使用なので、標準で「ヒラギノ角ゴ」なんですが、ロゴもWeb Fontsを使って表示したいなと考えていたので、ロゴとか英字タイトルの部分で「Jura」というフォントを使いました。こちらのフォントは以前、どこかのサイト(すみません失念しました)で、素敵フォントとして紹介されていた気がします。
こちらのサイトで、デザインに利用したくなるオシャレな商用可フリーフォントとして紹介されてました!

Twitterのフォント

記事内の英数には「Lucida grande」を。こちらはFacebookとかTwitterのウィジェットで使われていたので、そちらに合わせた感じです。第二候補には「Verdana(ヴァーダナ)」を指定してます。

Lucida grande

Mac OS X日本語環境のシステムフォントは、かつての「Osaka」に代わり、欧文文字の「Lucida Grande」、仮名の「AquaKana」、それ以外の日本語文字の「ヒラギノ角ゴ Pro」を組み合わせたものになった。

Verdana

マイクロソフトがコンピュータ用ディスプレイ上での視認性向上のために開発し、1996年に提供して以来世界中の多くのコンピュータで使用されている。

だそうで、日本語フォントと並んだ時もバランスが良いです。

配色については、どんな感じですか?

背景がこんななので、もうブレようがない感じですが、この背景の上にテキストを置くにあたって、配色はちょっと悩みました。
読みやすさ&背景の派手さを抑えるため、テキストエリアには不透明度95%の白を敷いて、そこにテキストを置く事にしました。派手な背景にさらに文字やボタンまで多彩にするとくどいので、通常の文字色は黒〜濃い灰色とし、リンク色やボタンにはダイアードで一番明度差がある配色にしました。ベースカラー:白、アソートカラー:虹色、アクセントカラー:黒(灰)、紫、黄、という感じです。

色を決める際、なにやら独特なこだわりがあるそうですね。

スポイトツール

はい、ここでいつも僕がやってしまう、どうでもいいこだわりがあるんですが、聞いてもらえますか。
色決めはいつもPhotoshopのカラーピッカーで色を適当に変えながら、「う〜ん、…この辺!」って言ってアバウトに決めているんですが、そこで決定した後、カラーコード(#XXXXXXのところ)を少し調整します。語呂がいいように!
たとえばリンクカラーは「#593869」にしました。最初ピッカーした色から、なるべくブレないように語呂合わせするのが肝です。ここではリンクカラーは「コックさんはロック」にしました :)。

最後に一言どうぞ。

最後まで読んで頂きありがとうございました!
今後もこんな感じで「Webデザインとかに関する個人的なまとめ」というスタンスで更新していきます。あたたかく見守ってください!

  • このエントリーをはてなブックマークに追加
  • ツイート

Comment & Pingback

3 Comments! for Lopan.jpをリニューアルしました!まずはごあいさつ。

  1. ピンバック: 【新感覚デザイン】1カラムのWordPressテーマを使用している国内ブログ7選【追記あり】 | メシオプレスブログ

  2. _watercolor

    コメントテストです。特に意味はありません。

    Reply

コメントを残す

*がついている欄は必須項目です。