DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • ピラティススタジオ「Pilates unit103.」さんのサイト制作時のフロー紹介

ピラティススタジオ「Pilates unit103.」さんのサイト制作時のフロー紹介

design_thing

  • top
  • blog
  • ピラティススタジオ「Pilates unit103.」さんのサイト制作時のフロー紹介

ピラティススタジオ「Pilates unit103.」さんのサイト制作時のフロー紹介

2018.12.15.

スポンサーリンク

スポンサーリンク

こんにちは、LINEの名前は「イカくん」ことBUROKIです。
イカが好きなんでこのネーミングにしてるんですが、すごく気味悪がられます・・(笑)

つい先日ですが、今月新宿の高田馬場にオープンした女性専用のピラティススタジオ「Pilates unit103.」さんのwebサイトを制作・公開しました。

Pilates unit103.のオーナー兼レッスン講師を務めるmaicaさんとはインスタグラムを通じてDMより依頼くださり、まずはロゴと名刺デザイン、そして今回のwebサイトとオープンに向けた制作物をほぼすべて任せていただきました。(まさに感謝しかない)

同じデザイナーに複数のデザインを任せることで必然的に統一感を出すことができ、デザイン視点からのブランディングにかなり役立ちますので個人的におすすめです。デザイナーを探す手間も省けますしね・・

「webサイト制作」とひと言でいいますが、一体どんなことやっているの?と疑問に思ったことはありませんか?
実はサイト制作ってデザインするだけではなく、いろんなことをしてるんです。

ロゴや名刺、フライヤーなどと違ってグラフィックソフトを使っただけでは完結しないweb制作。工程はもちろんサイトによって様々ですが、余程効率化を意識した制作をしていない限りは基本的なことは同じです。今回はPilates unit103.さんのweb制作のケースで制作工程を大まかですが紹介していけたらと思います。

工程1. ヒアリング

まずはどんなサイトにしたいか?のヒアリングからはじまります。
どんなサイトで、そのサイトでどんなことをしたいのか、何を見せたいのか・・サイトのゴールは何か?などのヒアリングです。これをすることでサイトに必要な機能が浮かび上がってきますし、場合よってはサイトをつくる必要がないのでは?ということも。

サイトはいわば自分の家のようなもの。家があるというのはかなりの強みではありますが、単に更新情報を見せたい場合なら無料でできるブログも今は豊富にありますし、簡単に投稿・シェアができるSNSのほうが手っ取り早かったりします。そういうところも加味しつつ、サイトの方向性を模索します。

工程2. イメージ、情報共有

ある程度ヒアリングを済ませたあとはロゴデザインと同じく、デザインテイストの共有をします。Pilates unit103.さんの場合はロゴや名刺デザインで大体のデザインテイストが固まっていたので、サイトに落とし込むのもそこまでの難易度はなかったです。
なのでサイトに使用するカラーとテイストの共通認識だけ持っておいて、すんなりと制作に入ることができました。

サイト制作の前に他の媒体のデザインに関わっているとイメージ共有がかなりスムーズになります。テイストの確認のあと、サイトに載せたい情報をいただきます。個人的な経験としては情報はあとから追加されることが多いので、この時点では大まかに共有してもらっても大丈夫です。

そして今回非常に良かったのがカメラマンに撮影された写真がすでに用意されていたんですね。なのでその写真の雰囲気もデザインの方向性を決めるのにいい参考になりました。

工程3. サイト構成考案

いただいた情報とヒアリングした内容に沿って、デザインに入る前にどんなページが必要で、どんな情報をどのページに記載するのか、ボクのほうでサイト全体の設計を組んだサイトマップを作成します。しっかりとした図をつくることもあれば、少ないページのサイトなら整理したテキストで先方に提案することもあります。

今回のPilates unit103.さんの場合はページ数がTOPページ、プラン、アクセス、問い合わせの計4ページだったのでテキストで共有しました。サイトのページ数は単に多ければいいというわけではなく、必要だと判断した場合は単一のページとしてつくり、組み合わせられそうな情報の場合はTOPページに組み合わせることもあります。

「どんなスタジオで、どんな人が講師なのか?」はこれからピラティスをはじめる人にとっては重要な情報だと思ったので、今回のサイトでは別のページとして分けず、TOPページに盛り込みました。なるべく「クリックを減らすサイト設計」もweb制作には重要なことです。クリックよりスクロールするほうが操作としては楽ですからね・・

工程4. ページデザイン

ここまでの工程を経て、ようやくページデザインに入っていきます。まずはTOPページのデザイン。Photoshopなどのグラフィックソフトを使用して1枚の画像としてラフを作成し、先方にサイトデザインの確認をとるのがスタンダードなやり方です。
この時点でサイトに使用するカラーやフォント、レイアウトなどを正式に決定させます。公開までの日数がタイトな場合はラフをつくらず、htmlとcssコーディングをしながらサイト構築していくこともあります。

そしてTOPページ提案後に先方からOKをいただいたあと、TOPページに沿ったデザインテイストで他ページのデザインもしていきます。

工程5. コーディング

sublime textでのコーディング

デザインが固まったからといってそこで終わりではないのがwebサイト制作の最大の特徴です。
ここからはインターネットで見れるようにするためのコーディング作業です。

デザインは出来てもコーディングはできないというデザイナーも少なくないです。webデザインのフロントエンド(サイトを制作する側。サイトを運営・管理する側はバックエンドといいます)で使用する言語はhtml、css、javascript、phpなどがいまは主流です。それらの言語を使用してコードを書いていきます。

今回は今後ブログなど更新するかもしれないということだったのでブログ作成ツールである「wordpress(ワードプレス)」でのサイト構築にしました。wordpressはブログツールながらサイト制作ツールとしてもかなり優秀で今やどのサイトにも導入が当たり前になっていますね。wordpressでの構築も便利ではありますが、いかんせん「マニュアルのないツール」なので専門的な知識も必要で、習得しなければ導入することも難しかったりします。

ちなみにボクはコーディングする際は「Sublime Text3(サブライムテキスト)」というテキストエディタを利用しています。
なんといっても動作が軽いですし、同じワードのテキストを一括で編集できたり便利な機能が満載なのでおすすめです!

工程6. スマートフォン表示対応

Pilates unit103.のスマホサイト

ひとつのサイトに今はパソコンから、スマホから、またはタブレット端末からと様々なデバイスでアクセスすることがある時代・・
それぞれのモニターサイズに合わせてサイトを表示させる「レスポンシブデザイン」でのサイト構築がwebデザイナーには求められています。

ボクがいまサイトのデザイン面で1番重要だと思っているのが、とにかく「ロゴも画像も文字もぼやけさせない」ということです。いろんなサイズのモニターで見られるのが当たり前になっているwebサイト。小さい画面もあれば大きなモニターで見られることもあるでしょう。
それぞれの環境でもストレスなく見れるようにする。逆に言うと、それが出来ていれば凝ったデザインは必要ないとさえいえます。(ちょっと言い過ぎかもですが・・)

なので表示させる写真はできるだけ大きく(横幅のサイズが約2000pxくらい)でも低容量で、画像でのテキストではぼやけてしまう可能性があるので画像テキストではなくgoogleが推奨しているwebフォントを使う、ロゴなどは画像ではなくsvgファイルというベクターで表示される拡張子を選択するなど・・
くっきり表示されるための技術や機能を駆使してサイトを作成していきます。

工程7. ソーシャルでのシェア対応、そしてサイト公開

これはおまけみたいなものですが、サイトをfacebookやtwitterなどのSNSでシェアするときに、TOPページのタイトルや説明文、サムネイル画像が表示されるように設定をします。ブログなどの記事を書く場合は、その記事毎にシェアできるように設定をすることでサイトへの訪問を促すこともできます。

今回のサイトも各ページにサムネイル画像の設置を行いました。
そしてブラウザで見た場合にタブの横に表示される「ファビコン」やTOPページ表示時に表示するロゴのローディング画面も設定し、サイト制作はこれにて完了、正式に公開となりました。

制作したサイトは喜んでもらえたのでひとまずホッとしました。

webサイトは公開してからがスタート

web制作という点ではここで完了ですが、つくるだけでは意味がなく、アクセスしてもらわなければいけません。ネットのいいところは「修正できる」という点です。サイトと向き合い、更新や修正をすることで「生きたサイト」となり、googleなどの検索エンジンにも高評価を受け、よりアクセスされやすいホームページになっていきます。
そのためにはもちろんクライアントさまの努力も必要になってきます。

ホームページはつくっただけでは意味がありません。生きものとしてとらえ、一緒に育てていきましょう。

いかがでしたか?
いろんなことに対応するので、いろんなスキルも必要になり、時間もかかります。web制作を依頼される際に少しでも参考にしていただければ幸いです。最後までお読みくださりありがとうございました。ご依頼ももちろんお待ちしております。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

design_thing

写真に文字を乗せる画像作成時のデザインバリエーション

このブログのサムネイル画像をつくるときにボクもよくやっている「文字が載っている画像」。YouTube動画のサムネイル画像ではもはやおなじみになって…

2020.09.22.

think

フリーランスとしてクライアントさまの成長ほど嬉しいものはありません

先日、こんなうれしいことがありました。 制作させていただき、7月末にwebサイトを無事公開したナノナノファクトリーさん(以下ナノさん)。 サイト…

2020.09.20.

private

高反発マットレスmotton(モットン)は腰痛改善の救世主となるのか?

昨年から整体院に通うようになったことは以前このブログでもお知らせしましたが・・。それからも通い続けてはいるものの、その場しのぎ感がどうして…

2020.09.16.

think

MakeShopでECサイトを制作するときの特徴と注意点をまとめてみた

現在、いつも制作させてもらっている「のぼり刃物店」さんのECサイト制作をしています。 今回のECサイトはGMOさんが運営する「MakeShop(メイクショ…

2020.09.12.

think

クセが強すぎる?前職のユニークな企業文化をご紹介します

7月くらいですかね?少し前の話ですが、ボクがフリーランスになる前にインハウスデザイナーとして勤めていた会社が、テレビ番組「カンブリア宮殿」に…

2020.09.10.

think

このwebサイトのリピーターはどれくらいいるのか?を調べてみた

webサイトを訪れる人には2種類います。 その2種類とは一度しかサイトを訪れない人と、再度訪れてくれる人です。 webサイトを運営している側としては…

2020.09.06.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル