デザインについて
サイトのデザインをアップデートしました。まだまだ追加したい部分もありますが、だいぶサイトっぽくなってきたのではないかと思います。
私はいわゆる"Webデザイン"的な領分で仕事をした経験は無いですが、デザイン自体は昔から好きで、エンジニアに転職する前に働いていたホテルでもフロント係をする傍に、フライヤーやらパンフレットやらのデザイン・制作業務をやっていたこともあります。なのでプログラムを考えることと同じくらい、デザインを考えることも好きだったりします。
今回は当サイトのデザインを行う際に自分が心がけていることなどを綴ってみようかと思います。
画面にものを詰め込みすぎない
このサイトをご覧いただければわかるかと思いますが、個人的にシンプルでミニマルなデザインが好みです。
このサイトをデザインするにあたってよく参考にしたのはNext.jsの公式サイトやZennやnoteなど。
個人的にデザインがごちゃごちゃしていたり、画面内にコンテンツがぎっしりと詰め込まれているようなサイトからはすぐに逃げたくなるので、サイトデザインでは「ものを詰め込み過ぎないこと」と、「余白の取り方」を特に意識するようにしています。
スマホ向け画面から作る
以前はサイトデザインを作るときはPC用のデザインから最初に作り、それを基ににスマホ用のデザインを考えていたんですが、ある日Twitterで、
「サイトデザインは、スマホ用のデザインを基本にして、それを広げてPC用のデザインを作った方が楽」
というツイートを見かけて以来、スマホ用のデザインから先に作るようになりました。（元のツイートを紹介したかったんですが、何ヶ月も前のツイートなので見つかりませんでした…）
実践してみると、確かにスマホ用のデザインを先に作ってそれをPC用に拡張する方がデザイン的には作りやすいような気がします。PCが基本になると、つい画面に色々と詰め込んでしまい、いざスマホ用のデザインを作るときに「やっべ、どうしよう」となることが多々あったのですが、スマホを基本に考えれば自然と必要最低限のものだけをデザインに含めるようになります。
PC画面で作業することが多い人だと、どうしてもPC画面を基本に考えてしまいがちですが、現在スマホからサイトを閲覧している人が全体の６割である状況を考えると、確かにこのアプローチは理にかなっていると思います。
スマホファーストのCSS設計に関しては以下の記事がとても参考になるので、ぜひご一読することをお勧めします。
【CSS】レスポンシブデザインのメディアクエリはどう設計するのが最適か？
ハンバーガーメニューは付けない
PCではヘッダーメニューで、スマホではハンバーガーメニューでサイトをナビゲーションするサイトがとても多いですが、個人的にこのハンバーガーメニューというものが好きではないです。
まず、ハンバーガーメニューをスマホ画面上部の隅に置いているサイトが本当に多いですが、そんな上の隅っこに配置されても、正直押しづらいです。スマホを持つ手の親指では絶対に届かないので、もう一方の手で押してやる必要があります。(中には気を利かせて、ハンバーガーメニューを画面下部の隅に配置してくれているサイトもありますが)
たぶん、PC画面ではメニューが上にあるからそれに倣っているんでしょう。画面サイズによって、メニューが上にいったり下に行ったりするのも鬱陶しいですしね。
なら、PCでもスマホでも下にメニューをつけとけばいいじゃんと考え、このサイトではそうしました。
まあコンテンツが多いサイトではどうしてもハンバーガーメニューが必要な場合もあるでしょうが…
ていうか、他の人はハンバーガーメニュー使いにくく無いのかな？と思っていたら、まさに同じ意見の記事を見つけました。
「三本線を押すまでメニューの中身がわからない」「メニューを"開く"、"閉じる"という手間が増える」というのは、私も全面的に同意です。
まとめ
というわけで、自分なりのサイトデザインの拘りについて簡単に語ってみました。
統括すると、「今はスマホでサイト見る人が多いし、サイトデザインはスマホを基本にしてなるべく見やすくシンプルにまとめた方がいい」というのが、自分の拘りかもしれません。
まあとは言っても、やっぱ個人的にはスマホよりPCでサイトを閲覧することの方が圧倒的に多いんですけどね。
おまけ: デザインについての格言
最後に私が好きなデザインに関する格言を紹介します。
新しいデザインは必ず単純な形をしている。人間は考えることができなくなると、ものを複雑にして堕落してゆく
ウルトラマンをデザインした成田亨氏の言葉です。自分は初代ウルトラマンについてはそんなに詳しく無いですが、成田亨氏のデザインがとにかく好きです。デザインだけでなく、プログラムを考えている時にも私はこの言葉を度々思い出すようにしています。シン・ウルトラマン楽しみ。
（デザインとは、）コミュニケーションです
これは私が好きなスウェーデンの電子楽器メーカーのTeenage EngineeringのJasper Kouthoofd氏の言葉です。「誰が読んでも意味が通じることばを選ぶのと同じように、誰が見ても分かるようにデザインする、ということです。」とも語っています。この考えは、以前どこかで読んだデザインの本にも似たような言葉が書かれていたように思います。デザインを考える際には、基本となる摂理なのかも知れません。 元のインタビュー記事はこちら。
