Fireworks CS6の新機能、CSSプロパティパネルを便利に使ったWebデザインの流れまとめ


G3株式会社さまのコーポレートサイトを制作させていただきました。

CSSプロパティパネルが便利すぎて…

今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。

すでにサイトがWordPressで動いていて、別のテーマで運用中だったので、
テキスト等もそのまま流用でき、私の作業としては純粋にWordPressテーマのデザインとコーディングの部分でしたので今回ご紹介するのはその部分の流れになります♪

まず、イメージを膨らませる

イメージ固めから入りました。
会社のコンセプトが「毎日をワクワクさせちゃえ!」だったので、私の中でのワクワクのイメージを考えてみます。

google画像検索でワクワクを検索してみたり。
なんとなーくブルーが多い印象。

wakuwaku
こういうものも参考にしながら
私の中でのワクワクのイメージというのも固めていきました。

私の中ではテンション上がりすぎて楽しみで仕方ない!という時の感情表現だなという結論に。

外で、天気は青空で…
みんなで手をつないでジャンプ!!!的なイメージです。

手をつないで ジャンプ で画像検索…

jump

そうそう、なんかこんな感じ!

ジャンプしている写真もいいなぁと思ったのですが、
どうせやるなら関わっている人たちの写真を使いたいところなので、
今回は見送り(いつかやりたい!)清々しい青空をテーマにしよう!と方向性を決めました。

ざっくりイメージを作ってみる

コピーの文章やロゴなどを配置していきます。
青空のイメージ。こんな感じで。

rough

サイトの見せ方を考える

ここで細かいデザインを作っていく前にサイトの見せ方で悩みました。

現状、コンテンツ的には載せられるものがまだあまりない状態なので
どちらかというとイメージ重視のサイトがいいかなと思いました。

ちょっとした遊び心があるような感じに。

そこで今回は1枚ものにしてパララックス効果かアニメーション的なものをつけて、ぱっと見たときに楽しい、それこそワクワクのイメージが伝わるようなサイトにしようと考えました。

この時点でコーディングをはじめる

上記の方向性にしようと決めたので、そうなってくるとこれ以上Fireworksで作業していても仕上がりイメージがわかないので(動きみながらやっていきたい)ここからもうブラウザベースで進めていくことにしました。

slice

Google Web Fontを使う

今回はメニュータイトル等は英語表記にしようと決めていたのですが、
今後の運用等も考えてできるだけテキストベースでやってみたく、Google Web Fontを使用しました。

webfont

使いたい書体を探してUseを押します。

webfont-2

今回はQuicksandのBold 700ウエイトのものを使用しました。
必要なものにだけチェック。

webfont-3

あとは手順に従って、HTMLとCSSにコードをぺたっとするだけです

webfont-4

webfont-5

各ページのタイトル文字も、はじめは画像化しようかと思っていたのですが、
今回は同じくGoogle Web Fontで対応しました。

背景のグラデーションをCSSプロパティパネルで書き出す

お二人の好きな色がグリーンとレッドだと伺っていたので
それらの色をどこかに取り入れたいなと思い、各コンテンツの背景にしよう!と思いました。

切り替えがトップ含めて6つあるので、6色が繋がるようなグラデーションを作ることに。

Fireworksで長方形を6つ作り、それぞれにグラデーションをかけていきます。
(キャプチャでは繋がってるように見えるかもしれませんが長方形が6個並んでいます)

color

こんな感じでグラデーションができたら、
ここで!Fireworks CS6の新機能、CSSプロパティパネルの出番です。

ウインドウメニューからCSSプロパティパネルを表示しておきます。

CSS化したいオブジェクトを選択して、パネルを見ると…
css

こんな感じで、このオブジェクトをCSSで描画する時どのように書いたらいいのかが表示されちゃうのです!
超便利!!!

今回はグラデーションのCSSが欲しかったので、グラデーションとなっている部分をクリックして、右下の【選択範囲】のボタンをクリックします。

Dreamweaverに移ってコードをぺたっと。

dw

あとは貼付けるだけ。

簡単なステップでこんな感じで複数ブラウザに対応したコードがGETできます。

その他のCSSで表現したい要素もFireworksで見た目を調整して、コードをコピペ。

css3

ページ内の他の要素でCSSで表現したいものもFireworksでこんな感じに作ってしまいます。

テキストシャドウだったりボックスの影だったりといった部分。

css3-2

これらもコードをコピペすれば、すぐにブラウザに反映されます!便利すぎる!

雲と飛行機をjQueryでアニメーション

パララックス効果で雲を動かそうと思っていたのですが、それだとスクロールしないとなにもはじまらず開いた瞬間はなにも動いていない状態になってしまったので、トップ部分の雲はjQueryで背景のpositionを動かしてアニメーションするようにしてみました。

飛行機もぴゅーっと飛んでいくように。

完成したものを見てもらって、文言等チェック

文章等を手直ししてもらって、スクロールの幅等細かい調整をして公開となりました。

デザインに関しては完全におまかせで作らせていただいたので今回、超短時間で作れました。

CSSプロパティパネル最高です!

みなさんもぜひ使ってみてくださいね!

このあたりのデモや解説を含めたFireworksのイベントをデジハリ福岡校さんで行います☆

10月11日(木)19:30~21:00からデジハリ福岡校さんでFireworksのイベントをさせていただくことになりました。

CSSプロパティパネルの登場によってさらに便利になったFireworksなんですが、他にもPhotoshopやIllustratorと平行してでも使ってほしい便利機能がいろいろあるので、導入を迷っている方や持ってるけど使ったことない!という方向けにどういうところが便利なのかをデモを中心に解説していきます。

10月11日(木)19:30~21:00(開場 19:15)

場所はデジハリ福岡校さんです。

http://blog.dhw.co.jp/fukuoka_event/2012/09/dsf-vol101011fi-ccd5.html

サイトの表記がオーバーすぎてすごく恥ずかしいんですが…私が書いたんじゃないので目をつぶってください;;

もちろんFireworks好きな方も歓迎です☆
無料なのでぜひ遊びにきてください☆


こちらの記事もおすすめです

このブログで人気の記事です

コメント(Facebookのコメント機能を利用しています)

»

«


↓その他運営中のサイトのご紹介

Fireworksマニア Webサイトからカラーを抽出!分析!Web Site Color Picker PHOTO STOCKER -高解像度の無料写真素材- 壁紙カレンダー -デスクトップを飾る、サイズ豊富なデスクトップ壁紙- シンプルパターン研究所 -PhotoshopやFireworksで便利に使えるテクスチャ素材-
スタイルシート見出しメーカー -好きな色で作れる、あなた用のCSS見出し- ビビッドカラーズ -キュートなホームページ素材配布サイト- Android用の壁紙無料ダウンロードサイト Webデザイナー山口有由希のポートフォリオサイト