2024年新春リニューアルオープン！

新春

あけましておめでとうございます！
2024年は世界的にも節目の年であり、各国で首長選があります。
特にアメリカ大統領選は4年に一度のビッグイベントであり、これからの世界がどうなっていくのか興味津々でございます。

そんな中で、nyoroko Appsも新年のスタートを切るべく大幅リニューアルしました！
劇的ビフォーアフターのように、新居の内装をご紹介いたします。

ビフォー

かつてのレイアウトはフラットデザインを採用したモダンなものでしたが、それでも以下の課題がありました。

無駄な空白が多い

例えば、ブログページはアスペクト比16:9の横長な端末で開いた場合には以下のように表示され、両脇に空白ができています。
もちろん、空白があることでスッキリした印象になっていることも事実ではありますが、それでも無駄が多い印象がありました。

かつてのブログページ。両脇の空白が目立つ。

ブログの記事一覧が見にくい

上記の画像のとおり、せっかくの大きな画面でも記事が5つしか表示されていません。
記事が増えてきたので下の方にある記事が見えにくくなってしまいます。
どんなに面白い本でも本棚の奥深くにあって取り出せないのであれば死蔵されているのと同じですし、レイアウトの変更が必要です。
表示する情報を絞って、ある程度多くの記事が表示できるようにします。

配色がストイックすぎる

"Simple law, Complex behavior."というコンセプトを掲げて創作活動を行っているので、配色についても極限までシンプルにしていました。
モノトーンを基調としたUIに、クリックしてほしい箇所はビビッドなピンクを使用することでメリハリをつけていました。
コンテンツが少ないうちはこれでいいかもしれませんが、コンテンツが増えてくると識別が困難になってきます。
そこで、アプリやブログなどコンテンツごとに文字通り色を出していきます。

遊び心が無い

例えば、アプリページは以下のように表示されます。

かつてのアプリページ。ゲームセンターのように賑やかだがありきたり。

サムネイル動画のおかげで賑やかで気に入ってはいるのですが、WordPressを使わずに手作りしているのにありきたりなデザインになってしまっています。
せっかくWeb製作とゲーム製作の経験があるのですから、もっと遊び心のあるデザインにしたいです。

アフター

大胆なスプリットビュー

画面の横幅が大きいときは左側にヘッダー、右側にコンテンツを表示するスプリットビューを採用しました。
もちろんレスポンシブ対応もバッチリで、画面の横幅が狭いときにはヘッダーが上に来るようになっております。

スプリットビューを採用。アプリやブログの個別のコンテンツでは左側にタイトルが表示される。

ブログの記事一覧の改善

上記の画像のとおり、カードを採用してブログの記事がたくさん表示されるようにしました。
従来はサムネイル画像が無駄に大きかったのですが、これを縮小することでスッキリしました。

ビビッドで元気な配色

アプリやブログなどのコンテンツごとにテーマカラーを決めてみました。
ビビッドなヘッダーのおかげで各ページの印象が変わったと思います。

遊び心のあるアプリページ

そしてここが最大の見どころなのですが、アプリ選択画面でゲームボーイ風のゲーム機を使って選択できるようにしました。
十字ボタンでアプリを選択し、プレイボタンや詳細ボタンを押すと各ページに移動します。
ただ、遊び心と引き換えに操作性が犠牲になっている面も否めないので、従来のようなカードビューに切り替える機能も付けております。
なお、実はこのゲーム機はCSSだけで表現されております。CSSの表現力ってすごいですよね。

最大の見どころ。ぜひ手触りを感じてほしい。

いらっしゃいませ

そして当サイトの玄関といえるトップページもリニューアルしました。
こちらにもゲーム機を置いてみました。もちろんグリグリ動かせます！
子どもの頃に戻れるような、好奇心を刺激する数々のコンテンツを用意している当サイトはまさにおもちゃ箱なのです。
「いらっしゃいませ！」ではなく敢えて「おかえりなさい！」としているのは、「おもちゃ遊びをしていた子ども時代にようこそ戻ってきてくれました」という私からの感謝の気持ちの表れなのです。

おかえりなさい！

感想

テンプレート的なデザインから大幅に離れることになったので、一からCSSを書いてレイアウトを構成していかなければなりませんでした。
CSSを直で書いたことがあまりなかったので大変でしたが、styled-componentsをフル活用して何とかスッキリ収めることができました。
特に自力でレスポンシブ対応を行うのはかなりの苦行であり、またSafariだけ謎の挙動をすることが多くて四苦八苦したのですが、どうにか形にできました。
これで当Webサイトnyoroko Appsはより味わい深いものになったと思います。
2024年はより多くの人におもちゃ遊びをしてもらえる年になるよう、これからも様々なアイデアを実現していく所存です。