はじめまして。
Web活用経営で、主にホームページのデザインやシステム構築を担当しています、
Webデザイナーの櫻田と申します。

こちらに入社する前は、広告会社に勤めていまして、ホームページ以外にも、ポスターやチラシなどの紙媒体を制作するDTP(Desktop publishing)デザイナーも担当していました。

2つのデザインの大きな違いは、Webは「アニメーション」を意識して制作すること。

チラシのデザイン案は、打ち合わせでそのまま「仕上がり見本(校了原稿)」として提出できますが、ホームページのデザイン案は「動き」が確認とれないと、それ以上打ち合わせを進めることができません。

下記で紹介するアニメーションは、ホームページでよく使われる表現になります。

打ち合わせの際には、動きを参考サイトなどで確認していただくと、スムーズに話が進むかと思われます。

デザイン案提出の際に、セットでご活用ください。

●スライドショーorスライダー

(参照:Swiper
http://idangero.us/swiper/demos/04-space-between.html
トップページのメイン画像を切り替えたいときによく使われます。

●ドロップダウン

(参照:FLEXNAV
http://jasonweaver.name/lab/flexiblenavigation/
ページ数が多いサイト、階層の深いサイトで有効的な表現

●アコーディオン

(参照:Ziehharmonika)
http://www.testserver.de/wds_tim/ziehharmonika-demo/
スマートフォンサイトなど、縦長になりがちなページをコンパクトにする効果があります。

●カルーセル

(参照:Swiper
http://idangero.us/swiper/demos/09-freemode.html
ネットショップの新着欄、製品実績など商品の多さをアピールします。

●パララックス
(参照:IAN LUNN
http://ianlunn.co.uk/plugins/jquery-parallax/

関連記事

  1. WordPressの使い方 1.会社としての情報発信

    2017.05.12

    WordPressの使い方 1.会社としての情報発信

    こんにちは、Web活用経営の江本と申します。今回より、櫻田と江本の交代制でスタッフブログを書いて…

    WordPressの使い方 1.会社としての情報発信
  2. 製作事例のポイントその1 画像を入れる

    2017.06.29

    製作事例のポイントその1 画像を入れる

    こんにちは、江本です。前回の記事の最後に、「製作事例を書く際に必要な項目について書いてい…

    製作事例のポイントその1 画像を入れる
  3. 製作事例のポイントその3 説明文を入れる

    2017.09.13

    製作事例のポイントその3 説明文を入れる

    こんにちは、江本です。数回に亘り製作事例を作成する際のポイントについて書いてきました。今…

    製作事例のポイントその3 説明文を入れる
  4. 製作事例のポイントその2 タイトルを付ける

    2017.08.16

    製作事例のポイントその2 タイトルを付ける

    こんにちは、江本です。今回は、製作事例のポイントの第二弾「タイトルを付ける」について書いてい…

    製作事例のポイントその2 タイトルを付ける
  5. Webを活用した人材採用について

    2017.01.23

    Webを活用した人材採用について

    10年ほど前までは企業が求人募集をする媒体は新聞広告や各種フリーペーパーなど紙媒体が多かったのですが…

    Webを活用した人材採用について
  6. 2017.06.23

    モバイルフレンドリー2

    こんにちは。スタッフの櫻田です。以前、記事に取り上げられました「モバイルフレンドリー」。…

    モバイルフレンドリー2
  7. 製造業ホームページにおける情報発信について

    2017.06.13

    製造業ホームページにおける情報発信について

    こんにちは江本です。今回は、製造業ホームページにおける情報発信の考え方について書いていきます…

    製造業ホームページにおける情報発信について
PAGE TOP