作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １

曜日別や時間別のサイト利用状況といったアクセス解析レポートは、ある種「古典的」なデータです。今回は、Googleアナリティクスを利用して、その「曜日軸」と「時間軸」の組み合わせでより立体的にユーザー像を捉えていくと同時に、PCやモバイルの「デバイスカテゴリー軸」を加えて、より詳しくユーザー像や行動を推測していく取り組みを紹介します。 古典的な「曜日別」「時間別」レポートだけではなく、両軸の組み合わせとデバイスカテゴリー軸を加えてユーザー像の理解に活用する Googleアナリティクスには、曜日別や時間別のサイト利用状況を把握できる標準レポートは、執筆時では準備されていません（注）。ただし、値は取得しており、ディメンションと呼ばれる項目は準備されているので、カスタムレポートなどで利用できます。例えば「サイト全体の曜日別や時間別の、訪問やコンバージョンの状況」をまとめたカスタムレポートは、独自に

こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

2014年7月16日に、Google と Adobe がリリースした Noto Sans（Adobe からは Source Han Sans という名称でリリース）というオープンソースのフォントファミリーは「日本のWebデザイン史上に残る画期的なフォント」だと思ったので記事にしました。 これまでの問題 ウエイトの不足 普段Webデザインなどの仕事をされている方でないとあまり気にすることはないかもしれませんが、たとえば Android は、アプリによっては下記のように日本語部分と英数字部分で大きくウエイト（フォントの太さ）が異なることがありました。 ※この画像は、Nexus 7（Android 4.4）で Twitter 公式アプリを表示した時のものです。 Nexus 7 では Chrome ブラウザーなどでは日本語・半角英数字ともに丸ゴシックで表示され、ウエイトもおかしくないのですが、アプ

効果が出るバナーのレイアウトには一定のパターンがあります。 今回は成果を出せるバナーのテンプレートを20種、広告代理店でバナーを作成している私が作ってみました。 バナーのレイアウトでお悩みの方も、そうでない方も、イメージを膨らませたり、いざという時のためにストックしたり、自由に活用して頂ければと思います。 【eBook】コンバージョンする効果の高いバナーの作成方法 悩んだらまずは最強のベーシック型コピー・訴求文・写真などをバランス良く盛り込み、情報量が多いレイアウト。バナーの時点で多くの情報を伝えられるため、飛び先との整合性が高いことが特徴です。しかし珍しさやインパクトにかけるので、似たようなバナーにまぎれると埋もれてしまう恐れがあります。 ベーシック型バナーレイアウトベーシック型バナーサンプル ベーシックに負けない３つの王道レイアウト同じバナーを出し続けているとユーザはマンネリを感じてし

ちょっとしたイラストが描けたらなぁ。なんて思うこと多いですが、デジタルならではの方法で簡単に描く方法が公開されていたので、簡単ですが訳したいと思います。詳細はオリジナル記事であるHow to Draw Cute Thingsを御覧ください。 最初に好きなネコとかハムスターとかナマケモノなどの動物の画像を用意する。基本的に何でも良いけど、慣れるまではモフモフ系がやりやすいみたい。トカゲとか蛇はむずい。 選んだ動物を円の集合にする 円じゃなく三角や四角を使ってもよい。動物をシンプルにする工程。画像ソフトのシェイプから選んでね。 できた形の輪郭を描く 必要のない線を消す。余裕あったら脇の下を細めたり足の重なりを上手に書いたりしてみる。 全体のバランスを変形してかわいくする 頭大きくしたり、胴体縮めたり、太らせたりしてかわいくする。ここはセンス。 可愛さは目に宿る 目が一番大事。サンプルを参考に。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. おそらく、大半の企業はランディングページで望むだけの売上を得ることが出来ていないのではないだろうか。 もし望むだけの数字を達成できているなら素晴らしいことだ。しかし、大半の方は、どの会社に頼んでも数字は変わらないので、ほとんど諦めかけているかもしれない。 一方、弊社のランディングページは平均で４.２％のコンバージョン率が出すことができている。 また業界別では、賃貸業で１８.２７％、美容で１５.７２％、健康食品で１４.２１％、建築業で１３.６４％、整骨院で７.１３％など、業界平均を大きく上回る数字だ。 そこで本日は、バズ部がランディングページを制作する上で実際に行っている全ての手順をご紹介する。 これを読めば、高いコンバージョン率を記録して

Photoshopで吹き出しイラストを作ります。 吹き出しイラストは吹き出しイラストを作成する方法（イラストレーター）でもご紹介しましたが、イラストレーターで作る事が多いです。 Photoshopにもカスタムシェイプに吹き出しのイラストが搭載されています。ただ今回は、図形ツールを使用してオリジナルの吹き出しイラストを作成したり、カスタムシェイプを変形・組み合わせて作る吹き出しイラストも説明していきたいと思います。 目次 1.カスタムシェイプの吹き出しイラスト 2.図形やカスタムシェイプを組み合わせて作る吹き出しイラスト 3.パスで吹き出しイラストを作る 4.作った吹き出しイラストを部分的に変形する 5.吹き出しイラストの縁取り・塗りつぶし・模様の付け方 Photoshopにはあらかじめ数種類の吹き出しイラストが用意されています。 カスタムシェイプツールを選択し、オプションバーのカスタムシェ

Webサービス Screenqueri.es ブラウザ上で各デバイスのシミュレーションができる。 Responsive Web Design Test Tool ブラウザ上で各デバイスのシミュレーションができる。 responsivepx ブラウザ上でサイズを変更して表示確認ができる。 ish. ブラウザ上で各サイズの表示を確認できる。 Responsive Tools For Web Designer & Developers 各デバイスの表示が確認できる。操作も可能。 Responsive Roulette ブラウザ上で各サイズの表示を確認できる。 The Responsinator 各デバイスの表示が確認できる。 Juice’r 各デバイスの表示が確認できる。操作も可能。 Screenfly 各デバイスの表示が確認できる。操作も可能。 Responsive Design Testin

https://main--cc--adobecom.hlx.page/cc-shared/assets/img/product-icons/svg/indesign-64.svg | Adobe InDesign {{indesign}} 進化するレイアウトデザイン パンフレットやポスターなどの印刷物、デジタル雑誌や書籍からプレゼンテーションまで全てのページデザインとレイアウトを作成 {{plans-starting-at}} PRICE - ABM - InDesign {{small-tax-incl-label}} {{free-trial}} {{buy-now}}