kunugi design 2度目のリニューアル

前回のリニューアルから3年、ようやく2度目のリニューアルをいたしました！

前回2013年度のデザイン

2013年のリニューアルでは、レスポンシブ案件が増えてきたこともあり、第一目標がレスポンシブ化でした。 また、カメラを購入して楽しい時期だったので、写真を掲載したいという思いもありました。 このデザインは、まだ月刊誌だった「Web Designing」に掲載されて、少し自信ももらいました。 2人目の出産直後で仕事が減った時期でしたが、これからもフリーで何とかやっていけるかなあと感じた思い出があります。

今回2016年度のデザイン

kunugi designは、ロゴがどんぐりだったり色調もナチュラルなイメージなので、このテイストと四季の写真は相性があっているなあと我ながら感じておりまして、そのコンセプトはリニューアル後も継続しています。 あしらいやレイアウトは以前よりもっとシンプルにし、その分、色でもう少し遊ぼう！というのが今回のリニューアルの目標でした。 以前のリニューアルから3年。その間に、Web制作の状況も少し進化しました。

テキストは全てWebフォントで

まず、日本語のWebフォント利用が進みました。 kunugi designのサイトではA1明朝をメインフォントにしていますが、同Webフォントがモリサワ「TypeSquare」から配信されました。 前回は見出しなどは画像を多用していたのですが、今回はテキスト部分は全てWebフォントで表現しています。 Webフォントはカーニングが懸念事項かと思われますが、TypeSquareではCSSの記述のみで自動的にカーニングされるようになりました。 参考：http://www.morisawa.co.jp/about/news/3284 見出しは文字間をゆったり開けるデザインにしていますが、上記設定とletter-spacingの併用でいい感じになっています。 ただ、このA1明朝の部分が、Windowsで見たときに文字がかなりガクガクしており、どうしたもんかなーと思いつつ公開しています。 私のソースが問題なのかもしれないので、もう少し調整可能か調べたいと思っています。

ロゴ・アイコンはSVGに

また、ここ最近でようやくSVGも浸透してきたように感じます。今回はロゴやアイコンをSVGで作成しました。 SVGの特性をあまり把握しきれていないので、img画像として使用するのみですが（汗）。 企業サイトのソースを見ても、ヘッダーロゴはSVGにされているところが増えているようです。 可変しても画像が荒れないのはやはり気持ちいいですね。

Sassでコーディング

今年から、個人的な制作はSassでコーディングしています。 以前に「はじめてのSass」という記事でも書きましたが、一番個人的に便利だと感じたのが色の管理です。 kunugi designではテーマカラーが5色ありますが、その色番号を元に濃度を調整するなどして全ての色を設定しています。 当初、トップページだけPhotoshopでデザインしコーディングを行いましたが、下層は全てコーディングベースでデザインを進めました。 統一されたトーンで違和感のない色展開ができるので、Photoshopで色を確認する必要がなくなりました。 Photoshopの使用が減ったというのは、Webフォントで統一したことも大きかったと思います。 今までレスポンシブのコーディングは、まずPC版で１ページを組んで、それからタブレットやスマホのCSSを追加するという方法でした。 Sassでは一つのクラスを記述するたびに、必要があれば＠mediaを追加するような作り方で進めています。 自然と、要素要素で全ての解像度を並行して確認しながら進めるようなやり方になっていました。 書き出されたCSSは各解像度別にまとまっていないので、ソースが肥大化するしわかりにくいかも、、と最初は感じていましたが、実際にはclass別にまとまっている方が探しやすいように思います。 SassからCSSにコンパイルし、それをさらにWordpressのテーマフォルダ内にアップする・・・という手順で作りましたが、ここはもっとスマートにならないかな？と思ったりしました。

CSS3 Flexboxを採用

勉強も兼ねて、floatを極力使用せずFrexboxでレイアウトしました。 もしかすると業務ではまだ早いのかもしれませんが、普段コーディング案件がほとんどないので、自分のサイトは実験場でもあります。 これがなかなか難しく、プロパティなどの理解度は低いので、もっと勉強したいと思います(⌒-⌒; )

PC向けの解像度をワイドに

私はiMacを使用していますが、主観的に見てもリニューアル前のサイトは少し横幅が窮屈な印象もありました。 Googleアナリティクスでkunugi designのレポートを確認すると、「1920x1080」の解像度が1位、ついで「2560x1440」が2位、スマホ「375x667」が3位と、ほとんどがPCディスプレイで見られていることがわかりました。 PC用のブレイクポイントを1280pxにして、以前よりワイドなレイアウトにしました。 タブレット用のブレイクポイントも設定し、様々な解像度で違和感が出ないように調整しています。

ハンバーガーメニューをやめ、シンプルなナビゲーションに

3年前は、スマホにはハンバーガーメニューがお約束のようなイメージがありましたが、今回はスマホでもメニューを常時表示にするようにしました。 個人的な好みになりますが、ページ数も少なく、そんなに階層が深いサイトでもないので、あえて隠す必要もないかな、という判断です。 レイアウトもシンプル、コーディングもシンプルになりました。

縦書きのテキスト

トップをデザインした時点では、もっと随所で縦書きにしたいと思っていました。 が、コーディングするうちに中面ではほぼ横書きになってしまいました。 縦書きのテキストをWebで違和感なくうまく見せるのって、難しい！ でももっと広まるんじゃないかと密かに思っています。縦書きのWebサイト。

最後に

2年周期くらいでリニューアルするのが理想ですが、やはり自分のことはつい後回しになってしまいます。 梅雨頃にデザインを初めて、少しづつ作業を進め、ようやく公開することができました。 次のリニューアルはいつになるかわかりませんが、またその頃には業界も変化があるんだろうなあと怯えつつ・・・ひとまず肩の荷が降りたような感覚です。^ ^