Dreamweaver CC（2017）のブラウザプレビューボタンを探せ！

こんにちは！　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（ペットデン）」
おうちにワンちゃんがいらっしゃって、ご興味がある方は是非お問い合わせください！