ウェブ制作関連の記事一覧



Bootstrapをグリッドレイアウトっぽくする


みなさん、ウェブページの制作にBootstrap使っていますか。

最初から色々とclassが用意されていて便利に使えますよね。


しかし、Bootstrapは基本的にキレイに四角に並んだレイアウトをするのには向いていますが、並びに高さが違うものがあったりすると、あまりキレイに見えないのが難点です。


例えばこんな感じです。

Bootstrapで隙間が空いてしまう例


1行だけならまだ気にならないかもしれませんが、これが数行になると、高さが低い要素の下の隙間が気になります。この高さが違う要素をうまく処理できないものでしょうか。


そうした場合にMasonryという手法があります。

高さや幅が異なる要素のものを隙間なく敷き詰めるレイアウトの方法です。jQueryを使ったJavaScriptが有名ですね。


Masonry-01


今回はBootstrapを使いつつ、Masonryのようなグリッドレイアウトにする方法を紹介します。

スクリプト不要で、CSSを追加するだけなので、簡単に準備できる点がおすすめです。


ただ今回紹介する方法は、本格的なものではない簡易的なものなので、「幅が同じ」で高さが異なる要素を並べることに限定した使い方を想定しています。

具体的な使用例としては、TwitterやInstagramなどのSNS投稿をウェブページに埋め込むときに使います。

記事の続きを読む



20181125-HubSpotのフォームのスタイルCSSを変える-00

皆さん、HubSpot使っていますか?


ウェブのMA(Marketing Automation/マーケティング・オートメーション)でよく聞くツールのひとつがHubSpotです。

HubSpotの簡単な説明をすると、ベースにCRM(Customer Relationship Management/顧客とのやり取りを管理すること)としての機能がベースにあって、訪問客を惹き付け(アトラクト)、関係を築き(エンゲージ)、満足させる(ディライト)機能(※)があり、この流れを自動化も含め、より効果的に進めていくためのツールです。

もう少し知りたい方は以下のページをご覧ください。

インバウンドマーケティングとは? | ハブスポット

※ー罎付ける(アトラクト) 見込み客に転換する(コンバート) 8楜匆修垢襦淵ローズ) じ楜劼鯔足させる(ディライト)という定義もあります。


HubSpotのCRMは便利です。複数の営業担当がいる場合、お客様とのやりとりを自動で記録でき、コメントや売上情報なども残せるので、他の担当者がHubSpotのサイトで記録されたやり取りを見ることで引き継ぎが簡単に行えます。HubSpotのCRMはサインアップ(登録)すれば、無料ですぐに使えます。


さて、検索エンジンやSNSからウェブサイトへ訪問した方が、資料請求やお問い合わせをするときに必要となるのはフォームの機能です。HubSpotでは、資料請求やお問い合わせなどで使えるフォーム作成の機能を持っていて、フォームに入力された情報はCRMへそのまま記録することができます。

フォームのレイアウトはドラッグ&ドロップで簡単にできるので、複雑なプログラムがわからない方にもオススメです。


このフォームですが、標準のままだとフォームのスタイルの関係で、入力欄やエラー表示がわかりづらいのです。


HubSpotの有料版(HubSpot Marketing Starter以上)を契約していると、簡単に直せるようですが、まだそこまで本格導入するまでは…という方向けに、今回は無料版のままでも、フォームのスタイルの変更をできる方法を紹介します。

記事の続きを読む



マーケティングオートメーションの基礎 卩愀覆篳類、マーケティングの変化を学ぶ〉

最近ウェブ制作の界隈でマーケティングオートメーション(Marketing Automation:MAと書かれることも)という言葉を聞くようになってきました。

マーケティングの自動化というと、人が介在しないというイメージからAIとかプログラミング的なことなのかなとも思ってしまいますが、どういうものなのでしょうか。


詳しくわかっていないので、オンライン学習サイトの「スクー」で「成果を最大化するマーケティングオートメーション」という授業があったので、受講して学習してみることにしました。

このページはその授業を受講して、調べたことや、学んだことのメモになります。横文字や略字が結構出てくるので、調べながら授業に臨みました。

 

第1回の授業は「マーケティングオートメーション基礎」と題して、マーケティングオートメーションが生まれた背景や歴史、マーケティングオートメーションに必要とされる価値や機能などを学べます。

  • マーケティングオートメーション発祥の背景/歴史
  • ルーツから辿るマーケティングオートメーションの分類
  • 顧客中心時代に起きている4Pの変化
  • 顧客中心時代のマーケティングオートメーションとは
  • マーケティングオートメーションに求められている機能/価値
  • マーケティングオートメーションを活用したエンゲージメント構築の例
成果を最大化するマーケティングオートメーション(スクー)


講師は株式会社マルケト(Marketo)の弘中 丈巳さんです。



記事の続きを読む



●Noto Sans Japaneseの指定方法はDTP Transitを

新潟グラム × DTP Boosterの懇親会の時に、スピーカーの鷹野さんに「Noto Sansってウェブフォントの指定の仕方が分からないんですよ〜」と質問したら「あ、それならDTP Transitのサイトソースを見てみて」と言われました。って、今さらって感じですが、その内容について書きかけだったので、書き終えて年末を終わろうかと。


実際、DTP Transitのサイトソースを見たら指定の方法は分かりました。

  • DTP Transit

  • でも、この指定の方法って正式なモノなのか?って思ってしまいました。

    (見たい人は http://www.dtp-transit.jp/css/styles.css の中で「Noto」を検索してね)

    念のため正式な指定の方法をGoogle Fontsのページで確認しておくことは制作者として正しいことかなと。



    ●正式ドキュメントを探してみる

    なぜかって?

    「Noto Sans」で検索して、検索結果で出てきた最初のページを見てみます。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-01

    画像出典:google font noto sans(Google 検索)



    以下のページが出てきます。

    なんかごちゃごちゃ書いてありますけど、右上に「Open Noto Sans in Google Fonts」って書いてあるのでクリック!

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-02

    画像出典:Noto Sans(Google Fonts)



    するとGoogle FontsのNoto Sansのページが出てきます。「勝ったッ! 第3部完!」って思うじゃないですか。

    20141225-Google-FontsからNoto-Sans-Japaneseのダウンロード-05

    画像出典:Google Fonts


    記事の続きを読む



    ブログ著者

    名前:(Google+のプロフィール)

    ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

    お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

    ブログ著者について

    サイト内検索