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

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

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

ご依頼・お問い合わせ

ご依頼・お問い合わせ

スポンサーリンク

blog list

ブログ一覧

private

new

ブロキの自家製梅酒づくり。2ヶ月後の経過報告

ブロキの自家製梅酒づくり。2ヶ月後の経過報告

盆休みが明け、通常の生活が戻り、慌ただしい毎日になりましたね。そんな月半ば、皆さんにお知らせしないといけないことがあります・・ そう、梅酒で…

2019.08.22.

private

new

駒川商店街を練り歩き、味のあるデザイン看板を探してみた

駒川商店街を練り歩き、味のあるデザイン看板を探してみた

ある人が言っていました・・「クリエイティブとは気づきである」と。 そしてその気づく能力を養うには、日常生活からあらゆることに気づき、自分なり…

2019.08.20.

think

new

ひとつのデザインのなかで伝えたいことはひとつだけでいい

ひとつのデザインのなかで伝えたいことはひとつだけでいい

ブログは名刺ネタが続きますが・・名刺交換する際にお渡ししている活版印刷で制作したBUROKI designの名刺。 最近少し思うところがあって、名刺交換…

2019.08.18.

design_thing

1枚の名刺に詰まっているいろんなもの

1枚の名刺に詰まっているいろんなもの

写真はボクBUROKI designの1枚の名刺です。名刺サイズは欧米サイズ(縦89mm×横51mmで普通の名刺サイズよりひとまわり小さめサイズです)でつくってい…

2019.08.16.

private

インスタントラーメン専門店やかん亭の「ラーメン仮面」を食してみた

インスタントラーメン専門店やかん亭の「ラーメン仮面」を食してみた

少し前に元同僚たちと新世界で飲んだことをブログにてお伝えしましたが、その中の一人が日本橋にある「やかん亭」といういろんなインスタントラーメ…

2019.08.15.

private

前職を退職したメンバーで新世界で再会

前職を退職したメンバーで新世界で再会

世間では盆休みですが、ボクはありがたいことに盆休みも制作をさせてもらっています。いつもありがとうございます。 ですが、昨日は東京にいる元同僚…

2019.08.13.

all blog list

Latest contents

最新コンテンツ一覧

Do you like "B"?

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

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

topトップページ

aboutブロキについて

designデザイン

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル