HUMOR in DESIGN and CREATIVE.

BUROKI


top

BUROKI 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月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います。(笑)

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

Latest results

最新の制作実績

blog list

ブログ一覧

private

new

ダービーウィークは毎年のお楽しみ。スポーツ雑誌Numberの特集号を買う

ダービーウィークは毎年のお楽しみ。スポーツ雑誌Numberの特集号を買う

今週末はいよいよ日本ダービー。競馬シミュレーションゲームの「ダビスタ96」にハマりまくって、99年度版が発売されたにもかかわらず96年版を2000年…

2019.05.25.

private

new

長居公園の近くにある気になっていた肉バルBoo Boo Kitchenで晩ごはん

長居公園の近くにある気になっていた肉バルBoo Boo Kitchenで晩ごはん

クーラーを買いに行った2日前の夜に現在長居公園で開催しているビールイベント・オクトーバーフェストで飲んで踊って楽しんだあと、もう少し飲みたく…

2019.05.24.

private

new

大阪一豪華な朝ごはん!?飯炊き仙人のいるお店「ゲコ亭」にて銀シャリを食す

大阪一豪華な朝ごはん!?飯炊き仙人のいるお店「ゲコ亭」にて銀シャリを食す

実は新居にはまだクーラーがありません・・しかも今週末からまだ5月だというのにかなり暑くなるということで。これは早く設置しといたほうがいいよね…

2019.05.23.

design_thing

new

2012年から現在までのBUROKIロゴデザインの移り変わり

2012年から現在までのBUROKIロゴデザインの移り変わり

インハウスデザイナーを本業としながら「BUROKI design」として個人でもデザイン活動を開始したのが2012年。いまこのwebサイトの左上に掲げているボ…

2019.05.22.

private

new

送別会の夜にもらった「WATERMAN」のボールペンとは?

送別会の夜にもらった「WATERMAN」のボールペンとは?

もう2ヶ月くらい前の話で申し訳ないのですが、前職を退職したときに送別会を開いてもらったんですね。そのときに実は元同僚でありボクのYouTubeチャ…

2019.05.21.

private

webサイトに載せる写真がないなら一眼レフカメラで自分で撮ればいい

webサイトに載せる写真がないなら一眼レフカメラで自分で撮ればいい

昨日は昼すぎから近鉄の八戸ノ里駅へ・・もう5月の半ばということもあって暑くなりましたね。 前職から仲良くしてくださっていて、名刺や封筒なども…

2019.05.17.

all blog list

Latest contents

最新コンテンツ一覧

Do you like "B"?

最後まで見てくださって、本当にありがとうございます。

最後まで見てくださって、
本当にありがとうございます。

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

contactお問い合わせ

snsソーシャル