お仕事

【実績紹介】Westbrooks様 Webページを作成、春のキャンペーンを実践して感じた大事なこと

【実績紹介】Westbrooks様 Webページを作成、春のキャンペーンを実践して感じた大事なこと

いよいよ「平成最後」が終わりに近く頃ですね。師走までに走りきってしまいましたキタムラ100%です。
色々イベントがありましてブログ記事が滞納しました。その滞納記事を消化させていただきますね♪

ということで、今年に入ってWeb制作のお仕事を2件引き受けまして、そのうちの1つである「Westbrooks(ウエストブルックス)」様のWebページ作成について書かせていただきます。
https://westbrooks-mikura.com/

Westbrook's(ウエストブルックス)|御蔵島の宿と、人と人がつながることのできるオープンコミュニティハウス


色々勉強になることがありますので、また長くなりますがおつきあいくださいませ♪

Web制作における受注のきっかけとは

海と地域を盛り上げよう!Webサイト作成キャンペーン 2018年4月〜5月

4月から5月にかけて、Web制作に関するキャンペーンをしていました。

Twitterや口コミなどで拡散していただきましてありがとうございます。この結果、2件のお問い合わせがあり、1件が受注となりました。その1件が、Westbrook様でした。(もう1件は残念ながら見送りになりました。。。でもいつかゲットしてやるとただいま模索中です)

Web制作キャンペーンをやってみて感じたこと

海と地域をデザイン&Webで未来に繋ぐ

正直、Web制作に関しては私の中では破格?やと思いました。しかし、このキャンペーンは窓口になってくれたらいいなと感じましたが、実際キャンペーンに関しては価格は全く関係なかったということに気づきました。

安けりゃいいもんじゃない!

というのが答えでした。
なぜなら、ここ最近自分で仕事をすることに関しての「変化」が現れたのです。
「価値」というのは「価格が安いから」「早いから」ではなく「お客様が何を求めて、何をやってもらいたいか」というところに価値がありました。

キャンペーンだとページ数が限られたりしますが、内容や思い、そしてヒアリングをする際に

御蔵島のことをもっと知って欲しい

という思いがありました。
(御蔵島に関しては後ほど説明いたします)
それに気づかせてくれた案件でもあり、Westbrook様の案件に関してはキャンペーンでの対応ではなく正規の対応となり、キャンペーンはあまり関係なかったという答えになりました(笑)

「Westbrooks」というのは御蔵島の小さなコミュニティ

母体は宿なのですが、ここでは英語サロンや住民が集まるコミュニティも開催しています。
詳しくはWebをご覧ください。

御蔵島とはどこにある?

御蔵島はここ


私も三宅島経由でドルフィンスイムでイルカと泳ぎに御蔵島に行きました。今年は台風の影響で行けませんでしたが、東京を南下するとある伊豆諸島にあるひとつの島です。
気候にとても左右されやすい島です。高波になると船が着かないということもあります。(今回はこれが原因でした;汗)御蔵島を南下すると「八丈島」というテレビでも取り上げられた島があります。

しかし御蔵島には野生のミナミハンドウイルカが生息していて、そこでのドルフィンスイムは人気で、ダイバーやイルカ好きな人たちが行き交う場所でもあります。

また、御蔵島の山も注目して欲しいとのことで原生林は「巨木」が占めていて、自然の樹木はとても美しいということです。これは案件しなければわからなかったことです。バードウォッチングやトレッキングでも有名な場所です。

Webサイトのテーマは「御蔵島の自然」

御蔵島の自然


大事なのはWebサイトを持つ目的を重視したサイトを構成、作成しました。
ここはまだ個人的な課題もありますが、伝えたいことをしっかりとWebサイトに入れていきたいなということでヒアリングを進めました。

ここでページを紹介していきます。

宿泊ページ

https://westbrooks-mikura.com/lodging/
宿泊ページは1ページお部屋の写真や宿にあるもの情報、空席カレンダー(Googleカレンダーを使用しています)、申し込みフォームへの入り口をまとめました。
お部屋ってどんなとこなんだろう?って気になりますよね。
また、宿の周辺やドルフィンスイムしたあとのシャワーってあるの?とかの情報も載せてます。

ウエストブルックスページ

https://westbrooks-mikura.com/westbrooks/
コミュニティ「ウエストブルックス」の紹介ページで、ここではどんなことをしているのかや、インスピレーション担当の猫(ボリス)の紹介があります。
このページにある「いつでも、だれでも、だれとでも」の項目は、自然によって左右される御蔵島という島のコミュニティに関しての熱い想いが書かれていると、作成しながら感動しました。

過ごし方ページ

https://westbrooks-mikura.com/mikura_spend/
海はもちろんですが、山や島の中でどの様に暮らすのかを紹介しています。海ではドルフィンスイム、山では巨木を巡るツアー紹介、島では静かに島の魅力を感じながら過ごして、御蔵島という島を堪能してもらいたいということです。
また、過ごし方ってどの様なパターンがあるのかわからないという方は「オススメの過ごし方」を参考にしてみてはいかがでしょうか。

アクセスページやQ&A、お問い合わせなど

https://westbrooks-mikura.com/contact/access/
アクセスページは東京から御蔵島に行く方法で、ここで作図を用いた紹介になります。我ながらわかりやすく作りました♪
よくある質問は、項目が多いのでプラグインで対応し、お問い合わせも「ContactForm」で対応しています。
ではここで実際の作業に関しての説明もさせていただきます

ヒアリングの際に使用したのは「Adobe XD」です

ヒアリングに使用したのはAdobeXD


参考にしたいサイトを何個か選出し、擦りあわせました。
そこからどの様なサイトに構成するかを、ここでサイトマップやワイヤーフレームにしました。

「Adobe XD」はネット上で共有できるところが便利で、画像を作って添付しての手間が省けます。重宝していきたいですね。
https://www.adobe.com/jp/products/xd.html

WordPressに当てはめる

TopページのワイヤーフレームがOKになってから、本来でしたらここでデザインカンプ作成といきたいんですが、子テーマでカスタマイズしました。PHPはあまり得意ではないため(汗)子テーマカスタマイズという方法で行いました。

今回活用したテーマは「Habakiri」です。

もちろんレスポンシブ対応です♪
https://habakiri.2inc.org/

流石にこのままテーマを上げるのはと思い、ローカル環境の「MAMP」を使用しカスタマイズして、ある程度の構成が決まり次第画像を提出しました。

本番環境に入れて、原稿をもらいつつ仕上げる

本番環境でのチェックをしながら原稿を入れたり写真を入れたり、時には作図も行いました。
プラグインも導入しつつ、操作するのは私じゃなくお客様なんだ!と言い聞かせ、過去自分が使って良かったやつや新たに取り入れてプラグインなどを入れつつとの作業が進みます。

そしてWestbrooksのWebサイトオープン!

Webサイトオープンにはパスワード保護を解除し公開です。
このプラグインは次に紹介します。

今回使った主なプラグインを紹介

今回全部とはいきませんが、使用したプラグインを紹介します。

Password Protected

https://netaone.com/wp/password-protected/
公開前のWebサイトにロックかけるプラグイン。最終OKになったらロックを外せばOK

MetaSlider

http://escapetrip.jp/metaslider-wordpress-plugin-how-to-use/9893
固定ページや投稿ページにスライダー画像を載せるプラグイン

All in One SEO Pack

https://hacknote.jp/archives/35087/
SEOの設定ができるプラグイン(テーマによって入れない場合もあります)※Kinkadesigサイトに使用中

Instagram Feed

https://naitoisao.com/23832/
Instagramの投稿を載せるプラグイン(自社サイトでも使用中)

UpdraftPlus Backup

https://crosspiece.jp/recommend-plugin/#
UpdraftPlusバックアップ取るためのプラグイン(自社サイトでも使用中)

このサイトきっかけに地方の「知られていない良いもの」を発信できたらいいな

御蔵島はイルカと泳げる島なのですが、それ以外にもたくさん魅力があるということを知ってもらうためのきっかけになれば嬉しいなと感じました。
これから、サイトの方も充実したものになると信じて見守っていけたら幸いです。

御蔵島の小さな島の小さなコミュニティだからこそできること

ミナミハンドウイルカ

ネットワークで様々なつながりができるこの時代だからこそ、本当に知ってほしい情報は現地の方にしかわからないこともたくさんあります。この機会にぜひ御蔵島を知っていただき足を運んでみてください。

私も来年のドルフィンスイムはリベンジします!

おまけ「いるかいないか」をいただきました♪

この本には約140頭いるミナミハンドウイルカのうちの54頭のイルカを紹介している本です。しかも識別の仕方や見分け方、イルカのことや海ののことなどが書かれた本で、DVDも付属しています。
手に入れるには「御蔵島観光協会」や民宿で購入できます。
また、Webサイトでも注文は可能です。

そのほかにも、手ぬぐいやお土産などもいただきました。
お土産のパッケージには御蔵島のことやドルフィンスイムに関する情報などが掲載されたパッケージで2度楽しめます。お土産は家族と所属コミュニティのチームメンバーと一緒にいただきました。

案件は1人で回していたのか?

私1人では対応できない部分が何箇所かありましたので、所属コミュニティでヒアリングや技術的なことについてたくさん相談しました。

正直、私1人ではここまでこなせなかったです;汗

よくコミュニティやオンラインサロンなどがありますが、私は今所属しているコミュニティ1本に絞ってます。
っていうのも、もう長年の付き合いのある方や、イベント、グループワークで一緒に頑張って、ヘドが出るくらいダメダメだった私に色々アドバイスを出してくれたり時には叱ってくれたりしてくれた方々ですので、とても心強いと感じました。

大切なのは、助けられたらその分しっかり案件をこなし、しっかり次に繋げたいと感じました。
恩は恩で返すのが今の定めでもあります。

BlueFieldnetでは、海や我が地方の魅力を伝えたい方のチカラになりたい

お待ちしてます♪

これからも海や地方の魅力を伝えるための手段を作りつつ、クリエイティブでチカラになれる方々への未来を繋ぐきっかけ作りに花を添えたいので、お仕事のご依頼はぜひBlueFieldnetまでお問い合わせくださいませ。

最後まで読んでいただきましてありがとうございます。

ホームページ制作・デザイン・イラストのご依頼はBlueFieldnetへ

フリーランスWebデザイナー・海洋生物専門イラストレーターが、大阪を拠点に海と地域活性の未来を繋ぎ創造するクリエイティブを目標に、色彩配色アイデアで未来への価値を繋ぐデザインと「可愛くてカラフルな海洋生物をもっと身近に」をコンセプトにしたイラスト制作をしています。

ネットワークという広い世界の中で個々の色彩を輝かせ、あなたのより身近に寄り添ったビジネスのより良いパートナーとして応援致します。

〜カラフルな未来を創造する〜

詳しくはコチラ