はてなブックマーク

広告と連動したランディングページなどで、動画が使われているのを見ることが増えてきました。 動画を使うことでコンバージョンが上がったなどというケースも出てきており、少しでも効果を高めたいキャンペーンサイトやプロモーションサイトでは、動画が不可欠な要素になりつつあります。 とはいえ、一口に動画活用と言っても使い方は様々。そこで今回は、企画の参考になりそうな、動画を効果的に使ったキャンペーンサイト、プロモーションサイトを選んでご紹介していきたいと思います。 動画をうまくとりいれたプロモーションページ事例 ウォーターサーバーのある新生活 http://www.aquaclara.co.jp/newlife2016/ 業種：清涼飲料水 サイトの特長：ワンカラムデザイン、グリッド、レスポンシブWebデザイン 動画の活用ポイント：商品のある生活のイメージを訴求 ウォーターサーバーのアクアクララと、ホテル

もはやWEB制作手法の定番とも言える「レスポンシブWEBデザイン」。PCサイトもスマホサイトもまとめて制作・管理できるこの手法は、WEB閲覧のスマホシフトと連動して拡がってきました。そして今、この流れはLP（ランニングページ）の世界にも広がり始めています。 LPはグラフィカルで広告的な表現を使う場合が多いことなどもあって、あまりレスポンシブ向きとは言えないかもしれません。それでもレスポンシブ対応のLPの割合は確実に増えています。そこで今回は、今後さらに増えていくであろうレスポンシブLP制作時の参考になるような、クオリティの高いものを集めてご紹介したいと思います。 タニタ　プレミアムブレンドコーヒー http://shop.tanita.co.jp/coffee/?utm_source=ec-top&utm_medium=banner 業種：食料品 サイトの目的：コーヒーの販促 サイトの特長

Webサイトの制作で、悩みの種になることが多いのが「配色」。発注側と制作側のイメージがなかなか噛み合わず、何度も修正が発生…などということもよくあります。希望する色のイメージを伝えたいんだけど、どうやって説明すればいいか…そんな風に悩むことはありませんか？ Webデザインの配色は印刷物などと比べて指定の仕方が難しい上、流行りの色や配色が明確にある場合も多いので、レイアウトは良くても配色次第で古い感じに見えてしまうこともありがち。そのため、プロのデザイナーでも配色設計（カラースキーム）に役立つオンラインサービスを使用することが多くなっています。今回はそれらの中から、専門的な知識がない発注側の方でも感覚的に簡単に使えるものをご紹介します。希望する色のイメージを伝えたい時などにぜひ使ってみてください！ カラーパレット系ツール まずご紹介するのは、流行色や人気の配色など、最初から色の組み合わせが設

近年のWebデザインを見ると、フラットデザインやレスポンシブWebデザインなどの流れもあって、よりシンプルに、そしてすっきりした作りのサイトが増えています。このようなトレンドはマルチデバイスへの対応にも適していると言えますが、結果的に似たようなデザインのサイトが多くなり、シンプルである分、個性やインパクトに欠けてしまいがちです。 そこで、そのような欠点を補うために増えてきたのが、さりげないアニメーションやパララックスが施されているサイト。センスの良いものを多く見かけます。今回はそんな中でも「ページ遷移時のエフェクト」に注目して、心地よいエフェクトでページが切り替わるサイトをまとめてご紹介します。 iRobot ロボット掃除機ルンバ スペシャルサイト http://www.irobot-jp.com/roomba/800series/ 業種：家電 サイトの目的：製品紹介サイト サイトの特長：

更新日：2021.09.17 今回は、数ある幼稚園・保育園サイトを、いろいろチェック。そのトレンドを探ってみました。 幼稚園や保育園のサイトといえば、ひと昔前までは「かわいく」まとめていれば、十分役割を果たしていたかもしれません。しかし、今は少子化時代。「認定こども園」の創設など制度も変わり、業界は変動の時代にあるともいえます。一方の保護者は…といえば、「保活」という言葉も生まれ、多忙な中でいくつものサイトを見て入園先を早期から検討。WEBサイトの重要性は以前にも増して高まっています。このような背景のもと、効果的なホームページ制作に役立ちそうな、参考32サイトをピックアップしてみました。 幼稚園・保育園ホームページ参考事例32 数ある幼稚園、保育園サイトから、他園との差別化を意識し、戦略的にホームページを作成・運営していると思われるサイトを選んでいます。 Special：リーフキッズ保育園

Webサイトをより魅力的にし、集客力を高めていくためには、コンテンツ以外にも必要なことがいろいろあります。サイトの継続的な分析と改善は必須。あなたのサイトでは、どのようにそれを実施していますか？ 今日は、分析のマニュアル化がきちんと行えていない、十分な体制が組めていない、そもそも何を分析すればいいのかわからない、などという時に便利なツール「Nibbler（ニブラー）」をご紹介します。無料ツールでありながら、Webサイトの現状を多角的にテストでき、結果と合わせて改善点も示してくれますので、高額な分析ツールは導入できないという中小企業におすすめ。以下にその概要をご紹介していきます。ぜひ参考にしてください。 「Nibbler」は改善点を可視化してくれるツール Nibblerでは、分析結果が10点満点のスコアで表示されます。色分けされ、どこが強くどこが弱いのかもひと目で分かるのが、このツールの特徴

今回のWebデザイン10選では、雑誌やカタログなど紙媒体のデザインエッセンスをうまく取り入れた、マガジン風レイアウトのWEBサイトをピックアップしてみました。 Webデザインに比べて、はるかに歴史の長い紙媒体のデザイン。ここ数年はWEBへとシフトしていくメディアも多く、廃刊になってしまう雑誌なども多くありますが、それでもまだまだ紙媒体から学べることは多くあります。ページを眺めていて、「こんな感じで、うちのホームページもつくってみたいな」と思うことはあるのではないでしょうか？そんな時の参考になるサイトを、ピックアップしてみます！ 雑誌媒体と連動したWEBサイト マガジン風レイアウトのエキスを知るために、まずは雑誌媒体と連動したWEBサイトを見てみましょう。 GQ JAPAN http://gqjapan.jp/ 業種：ファッション雑誌 サイトの目的：雑誌「GQ JAPAN 」のWEB版 レイ

動きのあるWebページを制作する手法として、すっかり定番となったパララックス。「WEebイト運営者必見！2015年のWebデザイン、5つの大胆予測！」という以前の記事で、「パララックスがより洗練されて進化する」という予測をしましたが、実際に、使われ始めの頃のような派手なパララックスは少なくなり、より自然で高度な使い方のサイトが増えてきました。 そして今、パララックスの利用が特に目立つようになってきたのがLP（ランディングページ）です。そこで今回のWebデザイン10選では、パララックスを使ったクオリティの高いLPをまとめてみました。 パララックスを効果的に使った、ハイクオリティのランディングページ The COCA-COLA + RIEDEL GLASS http://cocacola.riedel.co.jp/ 業種：食品 サイトの特徴：レスポンシブWebデザイン コカ・コーラとワイングラ

スマートフォンの普及に伴って目にすることの多くなったレスポンシブWebデザイン。デバイス（閲覧端末）に応じてレイアウトが変化するというこの手法は、Webデザインの定番手法としてすっかり定着しています。さらに最近ではGoogleが、スマホ対応しているかどうかをモバイル検索のランキング要因として使用することを発表したこともあり、あらためて注目を集めています。 そこで、今回のWebデザイン10選では、レスポンシブWebデザインを取り上げてみようと思います。黎明期のレスポンシブWebデザインといえば、複数カラムのPCサイトをスマホでは1カラムにして対応させる…など、ごく単純なものがほとんどでした。しかし、状況は大きく変わってきています。…ということで、進化した「今のレスポンシブWebデザイン」をピックアップしてお届けします! メーカー系企業での活用事例 Volkswagen The Beetle

優秀な人材の確保。これは、どの企業にも共通するとても重要なテーマの1つだと思います。エントリーが開始された2016年新卒採用サイトでも、Webのトレンドを盛り込んだデザイン性の高いサイトが多く見受けられ、各社ともかなり力が入っていることが伺えます。 特にターゲットが就活生ということもあり、若者に響く今っぽいデザインのサイトや、レスポンシブWebデザインなどでスマホ対応を重視したサイトが多いのもこの分野の特徴です。今回のWebデザイン10選では、そんな中から選んだ、特にクオリティの高い2016年度新卒採用サイトをご紹介したいと思います。採用サイトの制作事例としてはもちろんですが、Webサイト制作全般の参考になるものも多いので、ぜひサイトにアクセスしてご覧いただければと思います。 住友商事株式会社 2016年度新卒採用 http://www.sumitomocorp-recruiting.co

今回のWebデザイン10選定では、「背景に動画を大胆に使った日本のサイト」に続き、1カラムサイトを取り上げてみようと思います。マルチデバイス対応、モバイルファースト、ミニマルデザインなどの流れの中で、従来の主流であった情報量満載の2カラム、3カラムのサイトではなく、すっきりした1カラムのサイトを目にすることが多くなりました。 シンプルな作りで導線がわかりやすく、スマートフォンで見た場合でもPCとあまり見た目が変わらないなどメリットの多い1カラムサイト。自社サイトにもぜひ取り入れたい、と考えている方も多いのではないでしょうか。そこで今回は、そんな方々の参考になりそうな1カラムサイトを10サイト、厳選してご紹介します。 参考にしたい効果的1カラムサイト事例 Dyson http://www.dyson.co.jp/ 業種：家電メーカー サイトの目的：ダイソンの企業と商品の紹介 サイトの特徴：コ

ホームページの新規立ち上げやリニューアル時には、どんなイメージがいいだろう…と、いろいろなサイトを見ながら考えることが多いのではないでしょうか。見ているうちに、ヒントが浮かんでくる…などということも多いですよね。そんな時、便利に使えるのが、選ばれたホームページを集めたギャラリーサイトです。 でも、このギャラリーサイト自体もたくさんあって、どれを見ればいいのか…と、迷ってしまうのではないでしょうか。そこで、当社のデザイナーたちがおすすめのギャラリーサイトをまとめてみました。スマホサイトが探せるギャラリーも紹介していますよ。ぜひ、参考にしてみてください！ 当社のデザイナーがおすすめするWebデザインギャラリーサイト MUUUUU.ORG（ムーオルグ） http://muuuuu.org/ 縦に長いサイトを集めています。掲載されているデザインの質が高く、様々な切り口から探しやすくなっているので、

数年前から背景一杯にクオリティの高い画像を使ったホームページを見かけることが多くなりました。伝えたいイメージを表現でき、印象にも残りやすいとして、海外を中心に多くのサイトで使われるデザイン手法になっています。さらに、2014年後半あたりからは、その進化系ともいえる背景に大胆に動画を使ったデザインが増えてきました。 動画を使うメリットは、言葉では伝わらない多くの情報を伝えることができ、その分ページ全体をすっきりとシンプルに、そして印象的にデザインできること。今回はページの背景として動画を効果的に使った日本のサイト10選をご紹介します。自社サイトの制作やリニューアルの参考にしてください。なお、リンク先のページで音声が出る場合がありますので、環境に合わせてボリュームをコントロールしてご覧ください。 制作/マーケティング系企業での活用事例 Re:creation http://re-creatio

WEB集客において、ソーシャルメディアの活用は今や避けて通れない施策です。そんなソーシャルメディア集客の中、大きな可能性があると感じながらも、上手く活用できていないとお悩みの方が多いのが「Facebook」ではないでしょうか。今回はそんな方への参考情報をお届けします！ みなさんは、Facebookで「Facebook for business」という集客の成功事例を紹介した公式ページが用意されているのをご存知ですか？数多くの集客事例から、ヒントをたくさん見つけることができます。今日はその中から「集客につなげるにはどのような使い方が効果的なのか？」という疑問解決に役立つ事例をいくつかとりあげてご紹介。共通する成功要因なども探ってみたいと思います。 Facebook集客で好結果を生んだ８つの活用事例 商品発売前のサンプリングで 280 万人にリーチ【キリン】 https://www.faceb