みなさん、こんにちは。Webマーケティングの運営支援をしているディレクターバンク株式会社の棟近です。 今月弊社で開催するWebマーケティング関連のウェビナーの予定をご紹介します。 Webマーケティングの課題や施策別に、現場で活躍しているディレクターが、運営ノウハウについて解説しています。 すべて無料のウェビナーなので、興味のあるテーマがありましたら、お気軽に参加してください。 ◆Instagram運用のコツ2022年11月10日（木）13:00〜14:00Instagram運用×セールスライティングの極意

CSSは設計手法も大事ですが、どういう単語で名前をつけていくかも大事だと思っています。 個人個人でばらつきが出るところでもありますし、「単語名 英語」で検索をして探した単語を使ったけど若干意味合いが違ったといったこともあると思います。 クラス名を決めるためのリストを見かけることもありますが、英単語の読みは書かれていても意味合いが書かれていることは少ないように思います。 自分の確認用と、チームで製作するさいの基準になるようなものを作りたいと思い、単語とその意味を短くまとめてGitHubにあげています。 CSS クラス名リスト | GitHub 以下投稿時の内容です。 名前をつけることは難しいですが、とても重要なことです。 CSSには設計思想が必要ですが、実践するにあたり、名前と機能の意味がとおり、名前のつけ方にブレがないようにするべきです。 このドキュメントでは、CSSでよく使われる単語を分

会社勤めをしていた頃、新規事業の立ち上げ部署で、いろんなプロジェクトのマネジメントをさせていただいた。 そして、今、ディレクターバンクでは、外部のパートナーの立場から新規事業の立ち上げ支援をさせていただている。 新規事業というのは「千三つ」の世界である。だから、たいていの新規事業プロジェクトはうまくいかない。 当たり前っちゃ当たり前だけど、既存の勝手がわかる環境から飛び出して、新しい世界を切り開く仕事なのだから、新規事業というのは、うまくいかないのが初期値なのである。 新規事業はうまくいかないのが当たり前である。 さらに、「うまくいっていない」新規プロジェクトを、仕分けしてみると、 「健全な方向に向かって、もがいている途中にあるもの」と、 「不健全な状態に陥って、停滞しているもの」 に大別される。 「健全な方向に向かって、もがいている途中にあるもの」に関しては、外部パートナーの立場として、

こんにちは！EC担当している佐藤です！ 今はECが中心ですが、たまにコーディングをしているのでこんなテンプレあったら便利かな～と思い今回こんなテンプレ用意しました！ お問合せページの上にある、今自分がどこにいるかわかりやすくするステップのcss↓です！ デザイン考えるときにも使えると思うので、コーダー・デザイナーの方参考に是非ご利用ください😊 レスポンシブ済みなので、表示の関係でデザインがSPだけのものになっているは画像を掲載しているので参考にしてください～ STEPデザインテンプレ7種 クラスにactiveがついている箇所が目立つ部分（今いるページのSTEP）のデザインになりますので、コピペしてページごとに変えて使用してください。 ひし形タイプ See the Pen by harukasato (@satosubarusan) on CodePen. 数字タイプ See the Pe

昨今Webマーケティング業界のリード獲得施策におけるトレンドはSNSを活用した施策が中心となっていますが、BtoBビジネスを中心とした場面においてはまだまだメールマーケティングが効果をあげる事例も多くあります。 企業のWebサイトでホワイトペーパーやサービス紹介資料をダウンロードするときなどに、メールアドレス登録が必須となっていた経験が一度はあるのではないでしょうか。 メールマーケティングは一般的なメールマガジンのように幅広い会員に対して定期的に送るだけでなく、ステップメールや特定のセグメントに絞ったキャンペーン情報を送るなど、顧客のステージに応じて様々な手法が存在します。 様々なアドレスに定期的にメールを配信する場合、適切なメール配信システムを活用することで高い費用対効果をあげることがあります。 これからメールマーケティングを始める方や現在利用しているメール配信システムの見直しを検討して

LPを運用して新規リード獲得の効果を上げるためには、つねに分析を行いながら改善を重ねることが重要です。しかし、改善が必要なことは分かっても、どこをどのように改善したら良いのか分からないというWebマーケティング担当者の方も多いのではないでしょうか。 本記事では、特にBtoB商材のLPの改善を行う際に参考となる、デザインまとめサイトと具体的な事例を10件紹介します。この記事を読むことで、改善の手がかりをつかんでいただき、次のアクションを起こしやすくなるはずです。 LPを作る時に参考にしたいデザインまとめサイト BtoB商材のLPおすすめ事例10選 ターゲットに合ったLPデザインを見つけよう LPを作る時に参考にしたいデザインまとめサイト LPは基本的にWeb広告をクリックしたリンク先として運用されるため、一般的なWebサイトに比べると事例を探しにくいところがあります。そこで役立つのが、さまざ

こんにちは！EC担当している佐藤です！ 前回お問合せフォームのステップ のcssを公開して、今回お問い合わせフォーム自体のcss作成しました！ レイアウトやデザインの参考・サンプルとして使用することもできます。 お問合せのデザインがコピペができる参考css探そうとすると、海外向けのようなデザインが多い気がするので日本の方向けに作りたいときは今回のようなデザインの方が良いと思います・・・！ シンプルなデザインで全てレスポンシブ済みです！いいレイアウトがあったら追加していきたいと思います😁 ※表示サイズの関係で、スマホ仕様に切り替わっていますのでご注意ください 2021.9.4　更新 種類4つ追加とブレイクポイントの修正をしました。 フォームテンプレ 見出しに色が入ってない、ラジオボタンの色がちがうデザイン See the Pen by harukasato (@satosubarusan)

フォームの各要素はブラウザによって基本となるデザインが異なります。 デフォルトの状態のフォームをChromeとFirefoxで比較してみました。 ChromeFirefox 分かりにくいですが、文言や大きさや色、アイコンなどほぼ異なっています。これがChromeとFirefoxだけでなく、Safari、IEでもそれぞれが独自の表現をさせるので、全部のデザインが異なっている状態です。 コーダーとしてはこの差異を極力なくし、デザインカンプ通りに実現することが求められます。 この記事では、各種フォームのCSSを初期化（ブラウザ間での差異をなくし）オリジナルなデザインを再現する方法を紹介していきます！

こんにちは。FASTCODINGデザイナーの七転び八重子です。 今回は、Webサイトのコンバージョン率に関わる重要なメールフォームについて、離脱させないデザイン時の注意点を考慮しながら実際に作ってみました。 離脱を防ぐ！メールフォームデザインの注意点ユーザビリティを考慮して、いかにシンプルでストレスの無いメールフォームを作るかがポイントです。 ① 個人情報の入力項目は極力減らす入力項目が多いとそれだけで離脱の原因になります。パッと見て、サクサクと進めそうなボリュームにすることが大事です。 ② 「必須」項目は、「*」でなく文字で記載する「＊（アスタリスク)」や「※​(米印)」と表現することがありますが、うっかり見落とされて「必須項目入力エラー」となってしまうと離脱する可能性が増します。 また、赤いカラーなどを使うと、色盲の方に認識されないので、しっかりと「必須項目」「必須」と記載しましょう。

授業中やプレゼン中に、「ここをクリック」とか「このようになります」とか言いますね。でも、発表者は自分でマウスを動かして満足そうなのですが、見ている側にはどこを指しているのか、ぜんぜん分からないことがほとんどです。発表者として、あなたはその自覚がありますか？小さなマウスカーソルを動かしたところで、ほとんど見えません。画面がさらに小さくなるオンラインミーティングなら尚更です。画面の小さいスマホで見ている参加者も多いかもしれませんよ！ 今回はマウスポインタの強調表示や、画面上の注意喚起に便利なアノテーションツールについて紹介します。 このブログの今月のサポーターの皆さんにお礼を申し上げます： Li02380さん、Amiさん、Cocoさん、ゴンタ＝ミチさん、ナゾの冒険家さん、ヒロパンマンさん、びびあんさん、ミニヤンさん、ありがとうございます！🎉 Google SlidesやPowerPointの

WEBサイトをつくっているとぶつかる問い合わせフォーム制作案件。 問い合わせフォームのためだけにWordPress使うのも面倒だし、かといってGoogle Formは便利だけどそのまま埋め込むと味気ない。 デザインのトンマナが崩れがちだし手抜き感も出る…。 今回はこの埋め込みをHTML/CSSでコーディングしてそれっぽい感じでデザインする方法について紹介します。 実はこれもGoogle Form！ ▶デモページ 目次 Google Formを作成する Google Formから必要な情報を抜き出す HTMLの問い合わせフォームに反映させる THANKSページを実装する ①まずはGoogle Formを作成する まずはGoogle　DriveでGoogle　Formを作成しましょう。 （もう作成済みの方は②に移動してください。） GUIで簡単に操作できるので詳しくは説明しませんが、テキストを

コーディングをしていて意外と面倒なのがフォームのカスタマイズです。 ブラウザによって見た目がまちまちで、サイトのデザインとマッチしないことも多々あります。ただ、デフォルトのスタイルをリセットしてカスタマイズしようとしても、他のHTML要素と違って色々と面倒な点もあります。 また、カスタマイズする際はアクセシビリティにも考慮しなければいけません。 フォームのデザインは、オシャレにする必要はありません。ユーザにとってわかりやすいものにすることがベストです。 この記事では、最低限のアクセシビリティを意識した、フォームのカスタマイズを紹介します。 👇 メンターやってます 👇 模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。 本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。 シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。See the Pen Animated Textbox by Stefan C. (@stefcharle) on CodePen. よく見るタイプのデ

LPの運用は、BtoBのリード獲得においても有効なマーケティング施策です。しかし、その成果を最大化するためには、BtoB商材ならではのLPの特徴を押さえる必要があります。また、LPを制作して広告とともに運用していくなかで、特にCVに影響する要所があり、そこを改善しながら運用していくことが大切です。 本記事では、BtB商材のLPの特徴と改善のために押さえるべきポイントを解説します。LPを運用しているもののいまいち効果が出ないという場合、ぜひご確認ください。 ランディングページ（LP）とは？ LPを制作するメリット BtoB商材のLPの特徴 BtoB商材のLP改善７つのポイント BtoBの特徴を押さえてLPの成果を最大化しよう ランディングページ（LP）とは？ ▲ディレクターバンクが運用しているLPの例 Webマーケティングにおけるランディングページ（LP）とは、一般的に、縦長1枚のWebペー

自社Webサイト運用の成果を測定し、改善を重ねていくために重要なのが、「KPI」です。KPIとは「Key Performance Indicator＝重要業績評価指標」のことで、企業や事業、プロジェクトといった組織の目標を達成するために重要な、業績を評価する指標のことです。 Webサイト運用にあたっては、運用の目的に合わせてKPIを設定し、日々その数字を追っていくことで、改善すべき課題が把握でき、取り組むべき施策が明確になります。この記事では、Webサイト運用におけるKPIの設定方法、Webサイトの運用目的別のKPI設定例を解説します。 KPIとは？ KPIの作り方 Webサイト運用でよく使われるKPI項目 目的別Webサイト運用のKPI事例 Webサイトの運用目的を明確にしよう KPIは「Key Performance Indicator」の略で、「重要業績評価指数」と訳されます。KPI

商用利用可能と明記されているもの 日本語対応がしっかりしているもの WordPressのバージョンアップ時のテーマ自体のアップデート対応やセキュリティ対応がしっかりしているもの カスタマイズの柔軟性 モバイルフレンドリー対応 SEO対策 サポートがしっかりしているか？ 上記の視点で、安心感、自由度とクオリティを考えた場合、有償版のWordPressのテーマを選択するというのは、有力な選択肢です。 無料テーマや利用者が少ないテーマの場合、アップデートやサポートが終了することや困った時に周囲に相談できる人がいないことがあり、注意する必要があります。 美容院・サロン・美容クリニック向けの有償のWordPressテーマの価格相場 今回の調査では、美容院等におすすめの有償テーマ10選を調べたところ、約5,000円～35,000円の範囲で販売されており、平均値を出すと20,000円といった数字が出まし

「文章を書くのが苦手。ライターなんて絶対にできない」 この仕事をするようになってから、何度かこう言われることがあった。 書くことが苦手な人は、どうやら結構多いらしい。 わたしは書くのが大好きな人間なので、いまいちその気持ちがわからず、なにが・なぜ・どういうふうに苦手なのか、いろいろと聞いてみた。 すると、 「なにから書けばいいかわからない」 「言いたいことをうまく文章にできない」 「とにかく時間がかかって嫌になる」 といった答えが返ってくる。 どうやらみんな、「最初から完璧に書こうとしている」ようだ。だから、「ちゃんと書けない」と投げ出してしまう。 正直、そういうのって、くだらないなーと思う。 文章なんて、好きなところから好きなように書けばいいのに。 書くのが苦手でノウハウに手を出し、さらに頭を抱える「書けない」人たち デジタル化が進み、メールやチャットなど、文章能力が求められる場面が増え

Table of Contents Usage Sass Customization Accessibility Browser Support Usage Using Hamburgers for your site is easy (well, that was my intention anyway). Download and include the CSS in the <head> of your site: <link href="dist/hamburgers.css" rel="stylesheet"> Add the base hamburger markup: <button class="hamburger" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></spa