今回のKISSmetricsマーケティング特集記事の原題は “Everything You Need to Know About the Psychology of the Call to Action” です。 Call to Action (略してCTA) は直訳すると「行動喚起」という意味ですが、マーケティングの世界では、ウェブサイトや広告の最後にある「訪問者に押して欲しいボタン」や「そのボタンを含むページ全体」のことを指します。 クリック数やコンバージョンをあげるにはどうすればいいか、皆さん日々考えていらっしゃいますよね。実はこのCTAは「心理学」と深い関係があるのです。たった一つのボタンが、サイト訪問者の心理とコンバージョンにどれだけ影響しているかを解説しています。 (以下、翻訳文) おそらくほとんどのWEBマーケティング担当者が、CTAという言葉自体は知っているだろう。しかし、

CSSで表現できる新作ボタンエフェクトをまとめています。一部、jQueryなどプラグインが必要となりますが、CSSのコピー&ペーストで利用できるサンプルやテクニックを、WEB制作のためのコードコミュニティサイト Codepen よりピックアップしてご紹介します。 CSS3のテクニックがより進歩したことで、アニメーションなどより手軽なものとなっています。実際のコードを見ながらサンプルを確認、編集できるので、制作時間の短縮にもつながるだけでなく、世界基準の新テクニックをウェブサイトに採用することもできます。 CSSコピペで実装する、こだわりのボタン用HTMLスニペット40選 コピペでラクラク、押したくなるボタン用HTMLコードスニペット39個まとめ コピペで利用可！思わず押したくなるボタンエフェクト用HTMLスニペット40個まとめ ホバーエフェクトを確認するのには、「Run Pen」をクリック

若者向けではなく、主に50代以降をターゲットにしたサイト（スマートフォン向けサイト）のUIの好事例ついてまとめてみました。 ひとくくりに「50代」といってもスマホを使いこないしている方も多いと思うので、以下のような人物像で考えました。 ・５０代後半の女性 ・スマホは持っているけど通話、家族とのメールやLINE利用がメイン ・インターネット通販では商品を購入したことがない。 ・お気に入り登録しているサイト以外はあまり見ない ・小さい文字は読みづらい、老眼。 事例１：フォントサイズは大きめ・テキストリンクには下線を フォントサイズは通常よりも大きめにしておくと老眼の方に読みやすくなります。サイトによっては、テキストのサイズを「大・中・小」で切り替える機能がある場合もありますが、そもそもこの切り替えボタンに気づいてもらえない可能性もあるので、サイトのターゲットが50代以降と決まっている

あなたは”視認性とクリック率の高いバナーの作り方”をご存知でしょうか？バナーはただデザインが良いだけでは意味がありません。視認性が高く潜在顧客が「おっ！自分に関係がありそう！」と思ってくれるデザインやレイアウト、そしてキャッチコピーが必要なのです。 でも”視認性とクリック率の高いバナー”を作るのって難しそうですよね…。Webデザイナーなら誰しも経験あると思いますが、多くの時間を掛けたにも関わらず理想のバナーにならないことも。しかし”視認性とクリック率の高いバナーの作り方”にはその基本があります。基本を抑えることで理想のバナーを効率よく制作出来るようになります。もちろん、何度も練習を重ねることが大切なのですが、基本を知っているのと知らないのでは大きな差があります。 そこで今回は、高品質なバナーの作り方をまとめてみましたので、ぜひご覧ください！ そもそもバナーの役割とは？ 本題に入る前に、そも

ランディングページなどの申し込みページでは、CTAボタンのデザインを少し改善するだけでも、コンバージョン率（CVR：成約率）が劇的にアップすることがあります。 CTAとは CTA（シー・ティー・エー）とは、「Call to Action：コール・トゥ・アクション」の略で、Webサイトの訪問者に求める『行動を喚起する』ことを指す。 例えば、Webサイトの目的が『申し込み』の場合は「申し込みのための案内」がCTAになります。電話をかけてもらう目的の場合は「電話番号の表記」がCTAになります。 多くの場合は、《ボタン》や《リンク》の形で表現されます。 《CTAボタン》はコンバージョン率を上げるための重要な要素のひとつですが、意外とおろそかになっている場合があります。 心当たりがある場合は、この記事を読んでみてください。クリックされるCTAについて、完全網羅しています。

優れたデザイン原則は、誰にでも学ぶことができ、活用することもできます。 このガイドは、デザインの現場で利用できる実用的で基本的なテクニック10個をまとめてご紹介します。これらの基本ルールを知るだけで、あなたのデザインがずっと良くなります。 ずっと使える、デザインの基本まとめました。【2020年改訂版】 プロに学ぶ、一生役立つ配色の基本ルール8個まとめ【保存版】 コンテンツ目次 1. コントラストを活用しよう。 2. 「黒に近い黒」が「黒」よりも読みやすい。 3. 重要なコンテンツを最初に。 4. すべてのものを整列させよう。 5. 文字サイズと文字スペースに気をつけよう。 6. 検索結果の順番が重要なときは「リスト表示」。 7. まずは白黒でデザイン、あとから色を追加しよう。 8. 快適なデザインを目指そう。 9. 素敵な配色カラーパレットを使おう。 10. Apple や Google

This domain may be for sale!

2016年8月14日 UXデザイン, Webデザイン, スマートフォン 私の母は某アーティストの大ファン。20年以上ファンクラブにも入り続けている熱狂っぷりです。過去記事「シニア層のためのWebサイトユーザビリティ」では、そのアーティストのグッズを購入しようと奮闘していた母ですが、今度は別の目的でスマートフォン版のそのサイトを操作したみたいです。今回は私がそれを横目に見ていて感じたことを書いてみます。 ↑私が10年以上利用している会計ソフト！ ライブチケットの当選確認をしたかった母 ここ数年はMacを触る機会もほとんどなくなり、スマートフォンでWebサイトの閲覧をしている母。そして秋に行われる某アーティストのツアーのチケットに応募しており、その当選発表があったので確認がしたかったようです。 それを聞いて「私がやるよ〜」と申し出たものの、娘に頼ってはいけない！という母の思いからか、何度手伝う

Webサイトの閲覧の6割がスマートフォンユーザーと言われ（※1）、最近ご依頼いただくホーム―ページのほとんどがスマートフォン対応サイトです。 （※1）参照： http://www.similar-web.jp/blog/archives/3985 私たちがスマホサイトをデザインするときに特に気を付けていることの1つが「ユーザビリティ」です。ユーザーが自分に必要な情報をすぐに見つけられるように、どのようなメニュー設計が良いのかを考えて制作をしています。 そこで今回は、大手のスマホサイトがユーザビリティを考えて、どのようなメニュー設計をしているかを調べて比較してみました。 スマホサイトのメニュー設計の比較 比較内容 （1）メニューの場所は上か下か （2）メニューは追従するか （3）メニューのサイズ （4）メニューアイコンの種類、文字の有無 比較した大手スマホサイト（15サイト） ※順不同 Ya

あなたは、Webデザイナーやプログラマーに作ってほしいWebサイトのイメージを指示する際に、どのようにしていますか？Webデザインやプログラミングをある程度知っていれば、明確な指示が出来るかもしれませんが、多くの人がそうではないと思います。 そんなときに、役立つのがWEBデザインのギャラリーサイト（参考サイト）です。デザイン的にも秀逸な色々なサイトを一覧で眺める事が可能ですので、イメージに近いWebサイトがあれば、ひとこと添えてWebデザイナーに指示すれば簡単にイメージを共有できます。 今回はWebデザインの参考サイトを２０サイトご紹介します。これから自社もしくは自分のWebサイトを制作していこうと考えている方にはイメージを膨らませる参考になるでしょう。また、特別興味がなくても見ているだけで楽しいWebサイトばかりになっています。ぜひご覧ください。 １．MUUUUU.ORG 左サイドバーに

2016年版の最新情報として、スマホの画面サイズや縦横比を改めてまとめ直してみました。 前回作成した2014年版のリストに追記する形をとりました。 SIMフリー携帯の登場で、機種の種類はだいぶ増えたようにも感じます。 ほとんどの機種が１６：９ですね。規格が統一されることは、プログラマーやデザイナーには嬉しいかぎりです。

こんにちは。FASTCODINGデザイナーの七転び八重子です。みなさん、Webデザイン時のワイドサイズやファーストビューサイズを何ピクセルに設定してますか？私は半年ごとに支流のサイズを確認しているので、２０２１下半期スタートに合わせてまとめてみました。前回2020年10月にまとめましたが、今回は、デザインのレイアウトも考慮に入れています。目次 ソリッドレイアウトorリキッドレイアウトorフレキシブルレイアウト？ ソリッドレイアウト（固定レイアウト）とは？ リキッドレイアウト（可変レイアウト）とは？ リキッドの進化系... どうも、FASTCODINGディレクターのせりなです。 Webサイトを制作するとき、デザインの横幅を何pxにすればいいかなーって思ったことありませんか？ パソコンは何pxで作るの？スマートフォンは何pxがいいの？ って聞かれることが多いので、デザインの横幅でもう迷わないた

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

こんにちは、株式会社LIGでアートディレクターをしている竹原と申します。 「デザインとは情報設計」、といわれています。例えばボタンでも、アクションやレイアウトに応じてさまざまな設計をおこなっているんです。 今回は、僕が普段ボタンデザインをする際に考えてることをまとめてみました。デザイナーの方にはWebやUIのデザインをする際の考え方の参考に、デザイナー以外の方には、デザイナーって普段こんなことを考えながらデザインしているんだな、と感じていただければ幸いです。 独学でつまずいていませんか？ Webデザインをもっと効率的に学びたい、プロの現役デザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料を

2015年7月7日 便利ツール 先日超初心者さん向けにHTML・CSSを使ってWebページを作る講座を開いたのですが、予想通りやはり「これから勉強したい！」という人は、何から勉強すればいいのかがわからない事が多いです。また情報が多すぎて必要なツールもどれを選んだらいいかわからないケースもよく耳にします。そこで今回はその時教えたツールやサービスを中心に「これだけはそろえておこう！」というものを紹介します。あまりたくさん挙げても使い切れないかなーと思ったので、かなり絞っています。まずはこれらをとっかかりにし、自分好みのものを探していってくださいね！ ↑私が10年以上利用している会計ソフト！ 環境を整えよう まずはWebサイト制作をするための環境を整えましょう。 テキストエディター テキストエディターは、HTMLやCSSなどを使ってWebページを作成する際に使うツールです。Windowsに最初か

TOP  >  Design , Photoshop  >  デザインの質をワンランク上げるphotoshop技集「50 Fresh and High Quality Adobe Photoshop Tutorials」 デザインの現場で幅広く利用されているphotoshop。非常に奥が深く、極めて行けば様々な表現が可能なソフトウェアです。今日紹介するのは、デザインの質をワンランク上げるphotoshopの技を集めたエントリー「50 Fresh and High Quality Adobe Photoshop Tutorials」です。 Create a Baseball-Inspired Text Effect 比較的新しいphotoshopのチュートリアルが集められています。写真自体を加工していくものから、文字から加工で作り込んでいくタイポグラフィ作品まであらゆる表現のチュートリアルが

WEBサイトが実際のブラウザで見られた時のデザインをPhotoshopを使用して行います。クライアントやディレクターからヒアリングしたWEBサイトのイメージをワイヤーフレームの構成にしたがって形にしてきます。 順を追いながら説明します。初めてWEBデザインを行う初心者の方はサンプルファイルを確認しながら確認すると基本的なWEB制作の流れとアプリケーション操作が覚えられると思います。 デザイン準備までPSDファイルダウンロード 基礎レイアウトのPSDファイルダウンロード この記事の内容 作業：WEB制作のためのPhotoshop環境設定・ワイヤーフレームからのデザインの基礎レイアウト 使用アプリケーション：Photoshop レベル：アルバイト採用を目指す未経験WEBデザイナー～ デザイナーLevel：2 「アルバイト採用レベルのWEBデザイナー」目次 STEP1：WEBサイトをデザインする

こんにちは。LIGブログ編集部です。いつも「時間が足りない！」「忙しい」「寝たい……」と思っているWebデザイナーの皆さん、Photoshop作業の時間短縮をしていますか？ Photoshop作業の効率化すれば、余った時間でやりたいことができますよね。そこで今回は、Webデザイナーさんならぜひ使ってほしい、Photoshop作業を効率化する方法をまとめました。Photoshop初心者の方も、そうでない方も、時短できる要素がないかぜひ確認してみてください。 1. ショートカットを使い倒そう 作業時間の短縮を考えたときに、まず思い浮かぶのがキーボードショートカットですよね。知ってるか知らないかで大きな差が出てしまうところでもあります。 ひとつひとつ説明すると長くなってしまうので、おすすめのショートカットについては、かなり詳しく解説されているこちらの記事「Photoshopの効率化におすすめのシ

表示中のページから http://ferret-plus.com/amp/5540 にリダイレクトしようとしています。 このページにリダイレクトしないようにする場合は、前のページに戻ってください。