MENU

自社WEBサイトをスマホ最適化で制作|更新しやすさまで考えた設計

合同会社Barnetの公式WEBサイトは、企画・設計からデザイン、WordPressへの実装まで自社で制作しました。

重視したのは、スマホでの見やすさと、公開後の更新しやすさ。

PC向けに作ったサイトをスマホへ合わせるのではなく、最初からスマホで見ることを基準に設計しています。

制作概要
  • WordPress/SWELL
  • 最大約500pxを基準とした設計
  • スマホ最適化PC
  • スマホ共通の情報設計
  • 公開後の更新しやすさを重視
目次

スマホを基準に、最大約500pxで設計

コンテンツ本体は最大約500px。

文字サイズ、画像、ボタン、余白まで、スマホで見たときのバランスを基準に整えています。

目指したのは、単に「スマホでも表示できるサイト」ではありません。

合同会社Barnet公式WEBサイトのスマートフォン表示。最大約500pxを基準に設計したトップページ。

PCでも、基本となる見え方を大きく変えない

PCで表示した場合も、コンテンツ部分を横いっぱいには広げません。

スマホと同じ流れで情報を追えるようにしつつ、PCで生まれる左右の余白には固定メニューなどの補助導線を配置しました。

端末ごとに大幅なレイアウト変更を減らすことで、表示の崩れにくさも意識しています。

合同会社Barnet公式WEBサイトのPC表示。中央に約500px幅のコンテンツを配置し、右側に固定メニューを設けたレイアウト。

公開後も、更新がシンプルな構成へ

WEBサイトは、公開した瞬間がゴールではありません。

お知らせを書く。記事を増やす。サービス内容を修正する。

そうした日々の更新を考え、WordPressとSWELLを活用しながら、必要以上に複雑な構成にはしないよう設計しました。

Barnetでは、見た目だけでなく、公開後に実際に使っていくところまで考えてWEBサイトを制作しています。

目次