横浜市・東京都内を中心に活動するフリーランスのWebデザイナーとフロントエンドエンジニアのWeb制作事務所です。BtoBのLPやコーポレートサイトの制作を得意としています。

LPO（ランディングページ最適化）と言うと、情報量が多く派手なLPを作るようなイメージもあるかも知れませんが、今はいかにユーザーの心理を汲み取り、彼らのニーズに合わせた情報を提供できるかという方向にシフトしています。 今回は国内売上No.1のLPOツール「DLPO」を提供するDLPO株式会社の方に同社の具体的な事例を交えつつ、LPOの極意について聞いてみました。 DLPOとは ― まずはDLPOについてお聞きしたいのですが、どのようなツールなのでしょうか？ 「DLPO」はLPOや、もっと広義でいうとCRO（コンバージョンレート最適化）のために、各ユーザーに最適なページを出すことのできるツールです。ページ最適化の手段としてはLPOでの定番とも言える「A/Bテスト」「多変量テスト」に加えて、独自な機能として「パーソナライズ機能」があります。 パーソナライズ機能は、ユーザーの閲覧データや環境デー

アクセス解析ツールを導入して数カ月。いまいち使いこなせていないあなたへ。私が初めてサイトを分析する時に行う12のSTEPを紹介いたします。GoogleAnalyticsで全て対応出来るレポートです。ここで紹介するのはアクセス解析業界（？）における標準でもなんでもなく、私なりの分析手法ですので、他にも様々な方法やバリエーションがあります。 ※アクセス解析用語の基本的な知識と、GoogleAnalyticsを使ったことがある（出来ればアドバンスドセグメントを使ったことがある）人向けの方法になります。 2つの事前準備 分析に入る前に、以下の二つの事前準備を行いましょう。 A.サイト全体をじっくり見る サイトマップや主要の導線をたどってみたり、実際にコンバージョンしてみたり。自分なりにサイトの良いところと悪いところを見つけて箇条書きにしておきましょう。また、それが数字にどう反映されるか？を想像して

.htaccess の書き方（リダイレクト編） .htaccess の書き方（アクセス制御編） .htaccess(Apache) の Order Allow,Deny(またはDeny,Allow)について .htaccess の書き方（スピードアップ編） .htaccess の書き方（設定変更編） オリジナルのエラーページに変更する エラーページを用意して、トップページへの正しいURLへのリンクを貼っておけば エラーページからの離脱が減らせるかもしれません。 書き方には３パターンあります。 # エラーメッセージをカスタマイズするだけ。日本語だと文字化けします。タグ使えます。 ErrorDocument 404 "404 (x_x) page ga arimasen.<br><a href=http://yahoo.co.jp/>yahoo</a>" # ルート相対でファイルを指定。相対パ

2017年はインターフェイスデザインにとって多様性の一年でした。中でもユーザーフレンドリーに注目された年と言えるでしょう。 2018年これからのWebサイト、スマホアプリのデザインで押さえておきたいインターフェイスデザインのトレンドを紹介します。 Review of Popular Interface Design Trends in 2017 by Marina Yalanska 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 機能的なミニマリズム ブルータリズム 画像に統合されたタイポグラフィ アニメーションするヒーローイメージ オリジナルのイラスト 枠線がないレイアウト さまざまなインターフェースのアニメーション UIに優しいブランディング 単色のUI 進化した暗い背景の使い方 文字を読ませるためのスペース コントラストを

JavaScriptをあまり使いたくない、使えない。 速度の面やSEOとして、CSSで実装したい。 そんな方のために、JavaScriptで実装されがちなものを、HTML・CSSのみで実装してTipsにしてみました。 IE11〜、iOS Safari 9.2〜、Androidブラウザ4.4〜でだいたい動きます（ベンダープレフィックスが必要な場合も）。 デメリットもあるので、合わせて確認してみてください。 バルーン表示

キャッシュとは 使用頻度の高いデータを高速な記憶装置に蓄えておくことにより、いちいち低速な装置から読み出す無駄を省いて高速化すること。また、その際に使われる高速な記憶装置や、複製されたデータそのもののこと。 - IT用語辞典 Webサイトの表示においては、一度アクセスしたページのデータを特定の場所に保存することで、次回アクセス時の表示を速くし、サーバへの無駄なリクエストを減らせるというメリットがあります。また一口にキャッシュといっても下記の2種類があるので、どちらを指しているのか（あるいは両方か）意識しておきましょう。 ブラウザのキャッシュ：そのパソコンのユーザーが見たページのデータがローカルに溜まっていく。 キャッシュサーバのキャッシュ：不特定多数のユーザーが見たページのデータがネットワーク上に溜まっていく。 キャッシュの制御方法 ✏️ HTTPレスポンスヘッダ で制御 ➡️ Cache

データを活用して収益を最大化する組織づくりについて知りたい方/リード獲得に課題がある方/コンテンツマーケティングの戦略立案に悩んでいる方/ナーチャリングのノウハウを知りたい方/新規事業・新商品のマーケティング戦略策定を任されている方/マーケティングのデジタルシフトを進めたい方/少人数・限られたリソースでのマーケティング活動に課題がある方

creative memomemo Webデザインtips,Photoshoptips,クリエイティブでステキなものをまとめているブログ。 今回は、メモメモ以外で運営しているブログクリエイティブモグモグの投稿画面を少しカスタマイズしたので備忘録としてメモしておきます。 今回のカスタマイズは「記事タイトルを投稿一定期間過ぎたら自動的に変更する」というものです。 なんでこんなことをしたのか？そこも含めて説明させてください。早速いってみましょうどうぞ!! なぜタイトルを変えたいのか なぜこのようなカスタマイズをしたいのかというと、モグモグの美味しいお店紹介の記事を書いていて、SNSに最適な記事タイトルと検索に最適な記事タイトルって違うよなーと感じたからです。 具体的な例を出して、説明しましょう。 前提として、僕のブログの更新スタイルは、記事を書いた後にTwitterやFacebookで通知をして

iPhone X が発表されて間もなく、ディスプレイの「切り欠き」については至るところでちょっとしたイジリ合戦が始まっています。中には実際に信じてしまっている人もいるほど秀逸なものがありまして、それがこちら。 思わずクスッときてしまいますが（笑）、まあ当然こんなことにはなりません。 iPhone X にはディスプレイの上下左右に iOS の占有領域が存在し、それ以外（アプリのタッチイベントを認める領域）を Safe Area と呼ぶようです。Safe Area の外にある上部領域にはステータスバーとして時計やアンテナのインジケータなど iOS のシステムアイコン等が並び、下部の領域には iPhone X で導入された「ホームバー」が存在することになります。 では iPhone X の Safari で Web サイトを表示した場合に一体どのようになるのか？それを Web 上の情報を元にまと

アップロードした画像にキャプションを設定した際、標準の状態で書き出されるHTMLの出力形式では使い勝手があまりよくないので、この書き出されるHTMLをWordPressのコアファイルをいじらずに変更します。 標準の状態では、画像にキャプションを設定した時は下記のようなHTMLが書き出されます。 <div id="attachment_14" class="wp-caption alignnone" style="width: ○○○px"> <img class="size-medium wp-image-14" alt="○○○" src="○○○.jpg" width="○○○" height="○○○" /> <p class="wp-caption-text">キャプションの内容</p> </div> ここで注意しておく点は、<div>タグに自動的に付与される「style="wid

WordPressのoEmbed埋め込み機能とは WordPressでは、バージョン4.4から標準で「oEmbed埋め込み機能」が搭載されました。これにより、記事の投稿欄にURLを記述するだけで、そのURLのページ概要がカード式に表示されるようになりました。 WordPress 4.4 から 他サイトの記事を引用埋め込みできるようになった「Embed」 試しに、以下に当ブログの別記事のURLを記述してみます↓ 4大SNS（Facebook, Twitter, Instagram, LINE）の日本における利用状況《2016年10月現在》 ・・・いかがでしょう？アイキャッチ画像、見出し、本文の一部などが体裁よく表示されています。 こちらの機能、あらゆるURLに対応しているというわけではなく、記述した先のURLのページのhead要素の中で以下のlink要素が設定されている場合に有効となるようで

札幌のIT企業に所属しているウェブ制作者です。HTML/CSS/JavaScript/PHP/Movable Type/WordPress/a-blog cms/baserCMS Follow

Facebookログイン機能をWEBサイトに実装する際、SDK等を使わない方法で考えてみる。 現在、日本語で公式ドキュメント「ログインフローを手作業で構築する」が存在するので、まずはそちらを見た方が良いかも。操作方法などは数ヶ月単位で時々変わっている。以前は設定画面も英語だけだったが、日本語化されている。 ※ 実際、もうこの内容は古くなっていた(2017/10/11)。数ヶ月おきに画面デザインや項目の位置が刷新されているようだ。英語だったのが日本語化されていたり、項目が別の位置に移動していたりで大幅には変わっていない気がする。でも、Facebook API アップデートと付き合う話にあるように、大幅にアップデートされていないか時々確認が必要。 主に参考にしたサイトは Add Facebook Login to Your App or Website facebook OAuth + PHP

FBで昨日からケンケンガクガクの議論があったので、 ちょうど良い機会だし観測気球的に色んな人の意見を聞きたいなと思っているのでこのエントリを書きました。 広告まわりの話なので「興味ねーぞ！」って人は読まなくても良いと思います。 【発端】 宮脇 淳 - ヨッピーさんの衣装が謎すぎるけど、スポンサードコンテンツやネイティヴ広告に関する理解が進む良記事でした。... | Facebook ↑のリンク先が舞台ではあるのですが、死ぬほど長いし登場人物が何人かいるので、僕とおおつねまさふみさんのやりとりにフォーカスしておきます。 「タイトルにPRって入れるかどうか問題」については僕が以前にBuzzFeedのインタビューで話した事が僕のスタンスであります。 www.buzzfeed.com そもそも論として、PR表記をどうして入れなきゃいけないかというと、優良誤認を防ぐためでしょう。お金もらって宣伝して

Firefox 52、Chrome 57でついに正式サポートされた、CSS Grid Layout Module（CSSグリッドレイアウトモジュール）。便利だけどちょっと難しい、CSSグリッドを使ったレイアウトの操作方法を解説。 この記事では、CSSグリッドレイアウトを使って要素（Grid Item）を任意の順番に配置する方法を説明します。そのあと、グリッドで複数の要素の位置を揃える方法を解説します。 過去にもグリッド関係の重要なトピックを掲載しました。最初に『2017年に学びたい！次世代CSSレイアウト「Grid Layout Module」の使い方』でグリッドレイアウトで要素を配置するいろいろな方法を、次のステップとして自動で各要素を配置するグリッド自動配置アルゴリズムについてを『徹底検証！CSS Grid Layout Moduleの自動配置アルゴリズムはどう働くか？』で説明しました

Windows Vista の延長サポート期間が 2017年 4月 11日で終了することに伴い、Windows Vista 上でのみサポート対象となっていた IE9 についてもサポート対象から外れることで、IE11 が利用可能な唯一の IE バージョンとなります。 2016年1月12日 （米国時間） から適用された新しい、Internet Explorer （以下、IE） のサポートポリシーに伴い、「サポート期間中の各 Windows OS にインストール可能な IE のうち、最新版以外のバージョンの IE」 のみがサポート対象になっています。 これを現時点でサポート期間中の Windows に照らし合わせると、Windows 7 以降の Windows は、すべて IE11 のみがサポートされるブラウザになるのですが、唯一、2017年 4月 11日まで延長サポート期間が残っている Win