togo

= ひとりごと to go

zumuya の人による机の上系情報サイト

サイトをリニューアル:モノクロアイコンメニュー

  • サイト

前回のリニューアル(2012.3.14)では、homepage.mac.com からの乗り換えということもあって大きく作り直した。サイト内を Documents / Products / Hitorigoto で分類して、上部のメニューで行き来するという構造もそのときに生まれたものだった。

最近のデザインの流れに“フラット化”というものがある。テクスチャ、凹凸、光沢など取り払って、見る側も作る側もコンテンツに集中できるようにしようというものである。
個人的にはそれに対して否定的な部分もあるけど、確かに味付けを濃くしすぎてコンテンツを邪魔していた部分もあった。なので今回は一部その流れも取り入れつつ、シンプルで見やすくて飽きないデザインを目指してみた。

お約束のように中央揃えである。全体的に明るい色使いに。(背景色のグレーが Sketch の新規図形のデフォルトスタイルそのままなのは秘密)

ラベルだけだったメニューにはアイコンがついた。実はまともにシルエットのアイコンを描くのは初めて。ちょっと描くだけでも Susan Kare さんの偉大さを思い知る。

アイコンがついたことによって、iPhone のような小さいスクリーンでも押しやすくなった。これまでのものは細長いので小さく表示すると使いにくかったのだ。

アプリケーションでも Web サイトでも、よくラベルなしのアイコンだけを並べる人がいるけどあれはよくないと思う。いくらシンプルなアイコンでも一目で意味が分かるものは少ないし、見慣れないアイコンが並んでいると混乱する。

メニューは @2x イメージも用意されているので、Retina ディスプレイでもくっきり。さらにサイト全体の iPhone 対応も強化した。

---

最近はいつもそうだけど、デザインに Sketch が大活躍。これのおかげで Retina 対応も簡単にできた。そういえば前回はまだ Sketch に吸収される前の DrawIt を使っていたんだ。

そして今回からコーディングには Chocolat を使うようになった。普段あらゆることに使ってる CotEditor はシンプルでかわいくて大好きなんだけど、Web サイトリニューアルのように同時にいくつもファイルを操作する作業ではウインドウだらけになってしまうので。

Chocolat は派手さはないけど OS 標準っぽい雰囲気で動作も軽く、補完もそこそこ便利なエディタ。ちょうど CotEditor にファイルリストをつけたような雰囲気なのが気に入っている。さらにタブ機能(Workspace)があるけど、Espresso と同じようにサイドバーのファイルリストの上に表示されるのがとてもいい。

タブって便利だけど、タブの形をしたタブは数によって使い勝手が変わるので嫌いなのだ。Safari でも SafariStand のサイドバーは欠かせない。

---

今回、“ひ to り go と”は変化なし。味気ないフラットデザインを見続けて寂しさを感じたらここを見ることにしよう。

Share

リンクも共有もお気軽に。記事を書くモチベーションの向上に役立てます。