マーケティングでは、顧客心理を読み解くことが戦略策定のもっとも大切なポイントの一つです。 その顧客心理を読み解く一つの方法として「心理学」が応用され、人間の「性質」や「本質」をもとにしたマーケティング戦略が考えられてきました。 ただ、この心理学がWEBマーケティングにおいて活用されることはまれでした。 そこで、今回はWEBマーケティングに役立つ行動心理学の手法を8つに厳選してピックアップ。 それらが実際に活用されている企業サイトを集めて重要エッセンスを抽出しました。 そしてさらに勉強したい方に向けて、もう20個の行動心理学の効果と実用方法をまとめました。 ウェブサイト上で行動心理学がどのように使われているのか、実例を参考にしながら、ぜひ自社サイトやブログにも導入してみて「ついクリックしてしまう」サイトを目指していきましょう！ Webサイトの改善策を”自動”で提案！売上向上に繋げるサービス『

こんにちは、マラガの海の贈り物ことディレクターのSEKOです。 梅雨は嫌ですね。急に大雨が降ったり、雷が発生したりと自然の恐ろしさを日々感じております。 ところで皆さん、シネマグラフという言葉を聞いたことはございますか？ Web系であればご存知の方も多いと思いますが、念のため簡単に説明させていただきますと「画像の一部分のみがアニメーションで動いている画像」です。 そうは言ってもイメージしづらいと思いますので、まずは実際のシネマグラフをご覧ください。 出典： Arte em GIFs – Embrulha https://www.embrulha.com/arte-em-gifs/※現在は閉鎖されています。 New York Fashion Week – Cinemagraphs https://cinemagraphs.com/nyfw/ Fashion Editorial – Cinem

サイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。

入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル

【KGRoyals】 トップバナーの旗の部分はこのフォントを使ってます♪ 小文字と大文字で旗の大きさが違うんです！気が利くぅ♡

Webサービスほぼ劣化なしでJPG/GIF/PNG/SVG画像を超軽量化してくれる「Compressor.io」は要ブックマーク！2014年6月13日1 @JUNP_Nです。オンラインで利用することができる無料のWebサービス「Compressor.io」はJPG、GIF、PNG、SVGの画像をビックリするほど軽量化してくれます。面倒なアカウント登録などもなしで、画像をドラッグ&ドロップだけで使えて超便利！ 無料で多様な画像ファイルに対応しているのが嬉しい画像軽量化サービス！Compressor.io - optimize and compress your images and photos オフラインではJPEGの画像軽量化には「JPEG mini」を利用、それ以外の画像については「ImageOptim」を利用していたのですが、これだけではGIF動画の軽量化がもの凄く難しい。 関連：1

こんにちは、どうしようもないニート無職の@kami30kです。 ここ最近つくっていたサービスをようやくリリースしたので、作業ログ的な記事を書いてみます。 なにをつくったか 今回つくったのは、HIRAMEKI CAFEというサービスのアイデア共有サービスです。 KPT LOG、SHOMEI DESIGNにつづいて自身3つめのサービスとなります。 サービスのアイデア共有コミュニティ HIRAMEKI CAFE 簡単に説明すると、知っている人は多い（と思う）ideamiのようなサービスです。 ぼくはこのサービスがとても好きだったのですが、最近あまり使われていないようで、とはいえサービス自体のニーズはあると思うので、今回サクッとつくってみました。 機能自体はとてもシンプルで、 Twitterで認証する アイデアを投稿する グッド（いいね！のようなもの）、コメントなどをつけてもりあがる だけのサービ

2019年6月4日 Webデザイン, ダウンロード, フォント 女性Webデザイナーにとっては「かわいいと言えばこんな感じ！」という基本的な概念が自然と身についているものの、男性デザイナーにとってはなかなか難しい女性テイストのデザイン。でも大丈夫！今回紹介する無料素材やフォント・配色例を組み合わせれば、きっと女子力の高いかわいいデザインができあがるはずです！紹介する素材はすべて商用利用OK！参考になるデザインのWebサイトもいくつか紹介します！（あ、ちなみによく誤解されますが、私、Webクリエイターボックスの中の人は女ですw） ↑私が10年以上利用している会計ソフト！ 目次 無料フォント 無料アイコン・イラスト素材 無料の背景パターン素材 「かわいい」を実現する配色例 かわいい系デザインのWebサイト実例 無料フォント 曲線をうまく使うと女性らしいデザインに仕上がります。そこで、使用するフ

今年は出来るだけ不必要なものは削り、必要最低限の情報でデザインを表現する「ミニマリスム」なデザインが主流でしたね。 そんな中、写真やオブジェクトなど様々なもので「フラットデザイン」とまではいかないものの、同じ意思を次いだデザイン方法『ポリゴンスタイル』が秘かに流行を見せていました。   こんにちわ、レジットの小沢です。 １.画像を用意する まずは、ポリゴンスタイルに置き換えたい画像を用意しましょう。 今回使用する写真はコチラです。 前回の記事でご紹介した2014年の流行色【ラディアントオーキッド】色を少し意識しました。 ２.パスで囲んでいく 『１.画像を用意する』で用意した素材をイラストレーターで開きます。 早速『ペンツール』でブロック調に区切って行きましょう。 まずは人物から！！ この際注意する点は以下の点です。 ・囲む線は直線で、しっかりアンカーポイントで繋ぐ。 ・目や鼻等の形を表現す

ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素

作成：2014/06/2 更新：2014/11/01 Web制作 > WebデザインギャラリーやWPテーマなどで「見栄えのする」サイトが使っている効果など。今回はCSSのみで実現できる、動きあるエフェクトをメモしておきます。 エンジニア速報は Twitter の@commteで配信しています。 もくじ マスク １．マスク・キャプション ２．円形キャプション ３．全画面+オーバーレイ ４．ストライプの背景 フルスクリーン系 ５．スライド＋フルスクリーン ６．全画面背景動画 ７．パララックス ８．フルスクリーンにフィット ９．背景画像をブラウザごとに最適化 １０．メガメニュー 画像可変 １１．画像で枠線を表現する １２．半透明＋フィルタ １３．文字以外を透明にしてレイヤーさせる 図形 １４．ループ＋ローディング １５．3Dボックス １６．矢印ナビ 画像切り抜き １７．六角形 １８．卵型＋星形

Facebook広告を出してみました 昨日の記事で個人ブログでFacebook広告を出した時のアクセスアップに効果があるのかを検証した結果をご紹介しました。 アクセスアップへの挑戦！Facebook広告を出してみた！ブロガーにも役に立つ？ - マネー報道 MoneyReport Facebook広告はブログのアクセスアップに繋がるか！？実際に出稿してみました！結果は記事の後半に(^_−)−☆ ですが、私自身のFacebookページの運用がイマイチである事も反省材料としてありました。 マネー報道 Moneyreport | Facebook 自動投稿で記事の更新通知を挙げているだけで、きちんとFacebookページだけのコンテンツがないんです。 これでは確かにファンと呼べる人達を取り込むことは難しいなぁと反省した次第でした。 ですが折角Facebook広告に挑戦したので、Facebook広告

多様化するwebサイト、増加するデバイスに適応していくために今までのWeb制作のワークフローも見直す必要があるのではないでしょうか。またその一つの手法としてDesigning in Browserについて書きました。 現在ではWebサイトも、インタラクティブなサイト、アプリのようなサイト、可変するサイトなど様々なスタイルが見られるようになってます。 また、Webを閲覧できる環境もPCからスマートフォン、タブレット、テレビ、カーナビなど増加し続けてます。 それに伴い今まで以上にテストケースが増えてきてます。 今までのような静的なデザインを作ってから開発、テストというWeb制作のワークフローでこの変化の流れに対応できてるのでしょうか。 まず静的なデザインはあくまでこのように見えるという仮説であり、 解像度やスクリーンサイズが異なれば見え方も変わってきます。 更にどのように動くのかまでは表現でき

WEB系の情報セキュリティ関連の学習メモです。メモなので他情報のポインタだけ、とかの卑怯な記事もあります。 ※2020.9 注記:本ブログの解説記事は内容が古くなっております。OWASP ZAPなどのソフトウェアの解説は現行バージョンの仕様から乖離している可能性があります。 EC-CUBEで脆弱性を見つけたり、mixiの脆弱性報告制度で成果を挙げたりしたせいか、「どうやって脆弱性を見つけてるんですか？」という質問をされることが時折あり、一応手順は説明するのですが、いつも口頭で細かくは説明できなくて申し訳ないので、自分のやり方をまとめてこのブログにアップしておきます。 標準的な脆弱性検査のやり方しか説明していないので、脆弱性検査のやり方を既に把握している人が読んでも得るものは少ないのではないかと思います。今回は脆弱性検査に興味があるが何をどうしたらいいか分からないような初心者向けコンテンツで

2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して

数分でウェブサイトを制作する ブランドを確立。世界を制覇。 コードはなし 、デザインのスキルも必要ありません。

好きなことと嫌いなこと、得意と不得意、喜びと悲しみ、人にはそれぞれ違った生き様と個性があります。あなたが信じ、情熱を持って実現したい「じぶんの世界」の話を聞かせてください。あなたが「じぶんの世界をいく」ことのサポートをしていくことが、村式の仕事です。