システマのトップページを、新しいデザインに作り直しました。以前から作り直したいと思っていたページですが、手を付けてから見本を決めて形にするまで、ほぼ 1 日で済みました。早く終わった理由は、運営者のポートフォリオのサイトのために作った仕組みを、そのまま使い回したからです。この記事では、作り直しの流れと、使い回すとなぜ早くなるのかをまとめます。
ポートフォリオのサイトで、先に作っていた土台
運営者のポートフォリオのサイトは、少し前に作り直したばかりでした。見やすさと表示の速さにこだわって作り、Google の PageSpeed Insights では、パソコンで 99 点、スマホでも 90 点台が出るところまで仕上げています。読み込みの途中で文字や画面がずれない工夫や、余計な読み込みを減らす工夫も、このときにひと通り済ませていました。
システマのトップを作り直すにあたって、この土台をそのまま使うことにしました。ページの横幅や余白、文字の大きさ、ボタンやラベルの形、スマホでの並び方まで同じにして、変えたのは色とロゴだけです。システマは黒を基調にして、アクセントに青を使っています。
見本を見ながら、その場で決める
作り直しは、まず本物に近い見本のページを作るところから始めました。見本をブラウザで開いて、「ここはボタンを画像の下に」「この説明は長いので短く」と気になった所をその場で直していったので、デザインを決めるのに長い時間はかかりませんでした。紙や画像だけの案と違い、実際にクリックしたりスマホの幅で見たりできるので、決めたあとの手戻りもほとんどありません。
見本が決まってからは、その見本どおりに本番のページを作るだけです。土台がすでにあるので、新しく作るのはシステマだけの中身、つまりサービスの紹介や、組み合わせられる機能の一覧などの部分に絞れました。
新しいトップでできること
新しいトップでは、システマの各サービスに、すぐ移れるようにしました。サイト監視の SiteBeacon は無料の新規登録とログインに、AZIT と GearPort はログインとお問い合わせに、トップから一度で進めます。また、顧客管理やプロジェクト管理、発送管理などの、組み合わせて使える機能の一覧も載せています。
表示の速さにも気を配っていて、ポートフォリオのサイトと同じ工夫を入れています。公開したあとの PageSpeed Insights では、パソコンで 4 つの項目すべてが 100 点、スマホでもパフォーマンスが 96 点、ほかの 3 つが 100 点でした。トップの中ほどにある「このサイトの速さ」の欄では、毎朝測り直した最新の値を見られます。
使い回すと早くなる理由
今回いちばん実感したのは、一度ていねいに作ったものは、次からはそのまま使えるということです。速さの工夫や、画面のずれを防ぐ工夫のように、一度確認して仕上げた部分は、別のサイトに持っていってもそのまま効きます。そのため、新しいサイトでは中身だけに集中でき、確認の作業も少なく済みました。
これは、システマの考え方そのものでもあります。システマでは、一度作った機能を歯車のように組み合わせて、新しい仕組みを短い期間で作っています。ページづくりでも同じことができたのは、作り直しを通して改めてよかったと思えたところです。
複数のサイトを、1 つのサイトのようにまとめたい方へ
会社のサイトとサービスのサイト、ブログなど、いくつものサイトを運営していると、デザインや使い勝手がばらばらになりがちです。今回のように作りをそろえると、見る人にとっては行き来しても迷わず、同じ会社のサイトだとひと目で伝わります。色やロゴでそれぞれの役割を分けながら、全体を 1 つのサイトのように見せることもできます。
運営する側にとっても、作りがそろっていれば、片方で直したことをもう片方にもそのまま持っていけるので、手間と費用を抑えられます。ばらばらになったサイトをまとめたい、という場合の例としても、参考にしていただければと思います。
まとめ
ポートフォリオのサイトで作った土台を使い回したことで、システマのトップを短い期間で、見やすく速いページに作り直せました。同じ作りでそろえたので、ポートフォリオとシステマのあいだも行き来しやすくなっています。
一度作った仕組みを使い回すと、2 つ目からは早く、費用も抑えて作れます。サイトの作り直しや、複数のサイトのまとめ直し、業務の仕組みづくりでお困りのことがあれば、お気軽にご相談ください。