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年間様々な媒体のデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ブログをご覧いただきどうもありがとうございます。他にもいろんな作品の紹介やブログを書いてるのでぜひ見てみてください。制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談くださいね。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

スポンサーリンク

blog list

ブログ一覧

private

お呼ばれしたので奈良で開催されたwebデザイナーの飲み会に参加してきました

12月7日(土)の18時ごろ、天王寺からJR大和路線で奈良駅へ向かう・・ ボクが所属しているコミュニティメンバーのデザイナーさんから奈良でwebデザイ…

2019.12.09.

design_thing

どれを選べばいい?名刺を発注するときの業者と用紙の選び方

「自分の名刺をつくりたい!」「上司に名刺の発注頼まれたけど、どこにお願いしたらいいのかわからない・・」 これはクリエイターやデザイナーでなく…

2019.12.05.

private

ホームベーカリーでつくった自家製パンの出来栄えに涙が止まらない

相方が数年前にもらったというこのホームベーカリー・・ 廣瀬というメーカー?がオリジナルでつくっているホームベーカリーだそうで、ブランド名は「…

2019.12.03.

private

遅めの盆休み。石川県加賀温泉旅行の2日目と最終日

今回のブログは前回の加賀温泉旅行初日ブログの続きということで・・書いていきたいと思います。 前回のブログを見逃している人は下記のリンクよりご…

2019.11.30.

private

遅めの盆休み。石川県の加賀温泉を旅行してます

いまこのブログを旅館の部屋から夜景を見ながら書いています。 フリーランスになってから連休らしい連休がなく、仕事がひと段落つきそうな11月末のこ…

2019.11.28.

private

京橋で開催されたクリエイター忘年会に参加してきました

日曜日の夜はちょっと早めのクリエイター忘年会にお呼ばれしていたので、地下鉄で京橋へ・・。 北側の商店街内にある「燻製イタリア酒場 京橋 ORA」…

2019.11.26.

blogをもっと見る

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

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

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

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル