こんにちは! marketingのayunaです。約2ヶ月ぶりの登場ですが、みなさんお元気でしたか?

さて、前回はinteropへ出展したリポートをお伝えしましたが、今回は“ウェブ屋”の話をお送りします。
この春、marketingが携わってきた新製品「Ultra Sonic Scaler Petden(ペットデン)」が発売されました。
新製品が出る!というと、marketing部ではWebサイトを制作するのですが、特に新規となると、かなりの長期作業となります。

Web制作フロー

①企画
まずどんなサイトを作るのか?をはっきりさせます。
企画会議を行い、サイト全体のコンセプトを決めていきます。

②設計
Web制作フローでは最も大事な部分です。サイトに入れたい情報を揃え、その情報量から必要なページを割り出します。
ページ数が割り出せたら、リンク構成を図にします。いわゆるサイトマップです。

③デザイン
手書きや頭の中でラフスケッチをします。街中のサイネージや交通広告などを見てもヒントが湧きます。
それが固まったら、グラフィックソフトを使って、デジタルデータを起こしていきます。
この段階が“デザインカンプ”です。クライアントのOKが出るまでやりとりする過程です。

④素材準備
ボタンや写真、バナーの用意をしていきます。注意点はサイズは正確に作ることです。
また、素材の量が多いとそれなりに時間を要するのですが、各素材に何と名前をつけたか忘れてしまいます。
ここは、カンプの時点でしっかり定めておいて、派生するときはカンプにメモをとっておくと良いです。

⑤コーディング

私は、Dreamweaver CCを使用します。現在のバージョンは2016.11.2にリリースされた「2017」です。
ここで、今回は思わぬ事態が発生しました!!UI(User Interface/ユーザインターフェース)が変わっていたのです。
コーディング中に何度とも無く使用するブラウザプレビューボタンがないのです、、、これは困りました。
ブラウザプレビューがどこにいってしまったのかは、また後述するとして工程に戻りましょう。まだまだ、あるんです。

⑥デバック(確認・修正)
テストサーバー上で、各OS、各ブラウザ、各バージョンでチェックします。

⑦公開(~更新・管理)
テストサーバーから本番環境にアップします。工程が長い分、うれしさはひとしおですね!

さてさて、UIが変わってしまって「ブラウザプレビュー」ボタンが無い!とあたふたしてしまいましたが、Dreamweaverのインストラクターに見つけていただきました。
画面の上部にある「ドキュメントツールバー」から画面の下部にある「ステータスバー」に移っていたのです。
しかも、デザインが地球儀の丸いマークから、PCデバイスとSPデバイスを重ね合わせた四角いマーク(その中に地球儀の絵はあるにはあるのですが)に変わっていました。
自分で見つけられなかった悔しさは残ったものの、無事「Ultra Sonic Scaler Petden(ペットデン)」のサイトがリリースされてホッとしました。
皆さま、是非サイトにいらしてくださいね!

“優しく安心、痛みゼロ!”がキャッチフレーズのワンちゃんの口腔ケア製品「Ultra Sonic Scaler Petden(ペットデン)」
おうちにワンちゃんがいらっしゃって、ご興味がある方は是非お問い合わせください!
https://www.tomorrow-net.online/petden/