ホームページをリニューアルしました!アジンコート紹介こんにちは。デザイナー・コーダーの内田です。遅めの梅雨明けからしばらくして、会社近くの花園神社から盆踊りの音楽が聞こえてくると、パソコンに向かいながらも夏を感じられるようになってきました。そんなアジンコートでは、8月に入りホームページをリニューアルしました!大きく見た目を変えたわけではありませんが、サイト構成やデザインをブラッシュアップし、戦略的なサイトリニューアルができたと自負しております。自社サイトのリニューアルにあたって、お客様のサイトをリニューアルする際と同じような手順で行ったため、改めてサイトリニューアルを行う際の手順を振り返ってみたいと思います。実際にサイトのリニューアルをお考えの方や、「リニューアルをしたいがどんな準備をしたらよいのかわからない」という方の参考になれば幸いです。サイトの目的・課題を明確にするまず、リニューアルしたいサイトの目的・課題を明確にしていきます。「誰に向けたサイトなのか」「何を伝えたいサイトなのか」といったことは、コンテンツが増えたり、長い期間サイトを運用していたりすると曖昧になってくることは少なくありません。した曖昧な部分を整理し、抱えている課題を解決するためには何が必要かを考えていきます。Insightsなどを活用し、コンテンツの内容やデザインだけでなく、様々な角度から旧サイトの分析を行いました。構成案・ワイヤーフレーム作成サイトの目的や課題を明確にした後は、改善案を含めたサイトの構成案を考えていきます。文章や写真などコンテンツそのものが古い場合はそこから考える必要がありますが、今回のアジンコートサイトのリニューアルでは、ユーザー視点に立ったコンテンツの組み換えや見せ方、導線を整えました。そのためテキスト内容に大きな変更はなく、どのコンテンツをどのページに置くか、というまさにパズルを組み替えるような作業となりました。若干ページ数や構成が変わっています!サイトの構造が決まったら、次は各ページの構造も考えていきます。ページごとにコンテンツの配置を記したワイヤーフレームを作成していきます。TOPページのワイヤーフレームです。デザイン・コーディングワイヤーフレームをもとに、デザイン案を制作します。ここでサイトの見た目が確定し、加えてアニメーションなどの効果も細かく設計していきます。出来上がったデザインをもとに実際のページを作成するコーディング作業に入ります。サーバーの変更が伴う場合には、コーディング作業前にサーバー環境を整える必要があります。チェック・修正テストページで、アニメーションの動きをチェックしたり、テキストが間違っていないか、リンク切れがないかなどを確認したりして、公開に向けた最終準備を行っていきます。Explorer(フリーソフト)サイト全体を解析して、リンクエラーがないか確認できます。他にも様々な機能があり、サイト解析ツールとして活用できます。Links(Chrome拡張機能)ページ内にリンク切れがないかワンクリックでチェックできます。ブラウザによってサイトの表示が異なる場合があるため、複数のブラウザでの確認も欠かせません。パソコンのブラウザでスマートフォン版の表示確認をすることもできますが、実際にスマートフォンで見ると端末やバージョンによってうまく表示されない場合があるため、実機によるチェックも行っています。完成・公開クローズドなテスト環境で作成していたサイトをついに公開します!公開後も4と同じようなチェックで確認を行い、問題なければ公開完了となります。検索ページで表示されるテキストやページ名が反映されるまでは2~3日かかるのでしばらく待たなくてはいけません。した手順でしたが、このような流れでサイトリニューアルを行いました。最近ではサイトをリニューアルしただけでゴールということはほとんどなく、その後の定期的な更新・運用が重要となってきています。したことも踏まえて、弊社ではサイトを閲覧・使用する方にも、更新・運用する方にも見やすく使いやすいサイト制作を常に心がけています!どのようなサイトが適切か、という問題はスマートフォン・タブレット使用の増加やSNSの普及などで大きく移り変わっている昨今ですが、サイトのリニューアルとともに気持ちも新たに励んでいきたいと思います。今後はトップページのイメージ映像も新しいものを制作する予定です。お楽しみに!サイトリニューアルのご相談やご依頼は下記よりいつでもお気軽にお問い合わせください。(1)お問い合わせお問い合わせはこちらからお願いします。