The internet’s source for visuals.Powered by creators everywhere.
![Beautiful Free Images | Unsplash](https://cdn-ak-scissors.b.st-hatena.com/image/square/10f216e1287190ac0baaa15d3cf80011d1eab823/height=288;version=1;width=512/https%3A%2F%2Fimages.unsplash.com%2Fopengraph%2F1x1.png%3Fblend%3Dhttps%253A%252F%252Fimages.unsplash.com%252Fphoto-1714108671525-a8f722f30632%253Fblend%253D000000%2526blend-alpha%253D10%2526blend-mode%253Dnormal%2526crop%253Dfaces%25252Cedges%2526h%253D630%2526mark%253Dhttps%25253A%25252F%25252Fimages.unsplash.com%25252Fopengraph%25252Fwordmark.png%2526mark-align%253Dmiddle%25252Ccenter%2526mark-w%253D424%2526w%253D1200%2526auto%253Dformat%2526fit%253Dcrop%2526q%253D60%2526ixid%253DM3wxMjA3fDB8MXxhbGx8fHx8fHx8fHwxNzE1NjU1NjI5fA%2526ixlib%253Drb-4.0.3%26blend-w%3D1%26h%3D630%26mark%3Dhttps%253A%252F%252Fimages.unsplash.com%252Fopengraph%252Flogo.png%26mark-align%3Dtop%252Cleft%26mark-pad%3D50%26mark-w%3D64%26w%3D1200%26auto%3Dformat%26fit%3Dcrop%26q%3D60)
今回は、ランディングページ(LP)の直帰率は、どうすれば改善できるかご説明します。ランディングページの直帰率は、高いのが普通であり、直帰率だけを問題にするのは、正しいアプローチではありません。ただ直帰率を考える場合もあるので、あえて説明する。こうご理解ください。 なぜランディングページの直帰率が、問題になるのか? ランディングページの直帰率の目安とは? LPの直帰率が高くなる、9つの原因。 LPの直帰率を下げる、3つの改善策。 この順序で説明していきます。 なぜランディングページの直帰率が、問題になるのか? 「なんでこんなに直帰率が高いのですか!」 「いや、ランディングページの直帰率は、高いのが普通ですよ。」 あなたが制作会社さんなら、クライアントからこのようなお叱りを、受けたことがあると思います。もちろんあなたは、直帰率が高い理由を冷静に、説明することでしょう。 ランディングページは行動
最近、HTMLメールをいっぱい書く機会があったのですが、あまりウェブに良い情報がなかったので、メールを作る上でこれは知っておいた方が良いと思うことをまとめておきます。 メールの表示はブラウザとは異なる 大前提として、メールの表示はブラウザとは異なることが多いです。 なので、ちゃんとレイアウトを再現しようとすると、 ブラウザではなくメーラーで表示を確認する必要があります。 メールの表示はメーラーによってバラバラ メールの表示はメーラーによってバラバラです。ブラウザとほぼ同じように解釈してくれるメーラーもあれば、全然違うレイアウトで表示してくるメーラーもあります。なんでそんなに変わるのかというと、主に以下のような要因があります。 各種CSSプロパティの解釈の有無 ヘッドタグやスタイルタグの読み込みの有無 メーラーによる独自の最適化(それっぽい感じで'読みやすく'しようとする) CSS Supp
最近新しく追加された position の新しい値 sticky が場合によってはすごく便利なので記事を書いてみます。 対応ブラウザがまだあまり多くないので実用性は乏しいかもしれませんが、今まで JavaScript の力を借りなきゃ出来なかったことがたったの2行の CSS で出来てしまう魔法みたいな position の値です。 position: stickyMDN が説明が詳しいので貼っておきます。 参考:position - CSS|MDN 簡単に言うと「スクロールでその位置まで来たらそれ以降は fixed する」みたいな感じです。 サンプルこの記事内で「position: sticky」や「サンプル」など h2 要素に position: sticky をかけています。対応ブラウザであれば h2 要素が fixed しているはずです。 HTML<h2 class="h2-stic
明朝体フォントは手書きの雰囲気を残した日本語の情緒を感じさせてくれるフォントで、和文によく合います。また種類も豊富で、非常に個性が豊かなのも魅力です。 そこで本記事では、明朝体フリーフォントから、商用利用可能なものを16個をご紹介します。気に入ったフォントがあればデザインに取り入れてみてはいかがでしょうか。 ※フォントを利用する際は、各サイトの利用規約をご確認ください。 目次 明朝体フォントの魅力 はれのそら明朝 Oradano明朝GSRRフォント さわらび明朝 はんなり明朝 こころ明朝体 やさしさアンチック 刻明朝フォント 刻丸明朝かな ほのか明朝 あおぞら明朝フォント うつくし明朝体 ふぉんとうは怖い明朝体 戸越明朝 XANO明朝 梅明朝 イマジン・ヨコハマフォント 明朝体フォントの魅力 明朝体は横線に対して縦線が太いのが特徴。ウエイトが重くなっても、横線の太さはそれほど変わりません。
CSSのfont-familyで游ゴシックを指定すると、Windowsで細くなってしまう問題の原因と解決方法を中心として、最近の日本語フォント事情をまとめました。 CSS Nite LP47 Coder's High 2016にてお話した内容です。 昔からマークアップエンジニアを悩ませてきたfont-familyによる日本語フォント指定。OSのバージョンアップとともに、新しいバンドルフォントが増え、@font-face規則も主要なブラウザでサポートされました。それに合わせてフォント指定の方法もバージョンアップしてみましょう。 Web上できれいに見える日本語フォントを使う方法としてWebフォントがありますが、実際に使うにはさまざまな障壁があります。かといってバンドルフォントはOSによってまちまち……という状況だったところに、WindowsとMac OSの両方に「游ゴシック」という日本語フォン
WordPressをCMSとして運用していると、固定ページ(または投稿)内で本文の一部分のみを指定した日時で削除(表示)したい事があります。 例えば 1/1から数日間は「明けましておめでとうございます」 を表示しておきたい。 固定ページ内に貼ったバナー(画像やテキスト)は期間限定だらから期日がきたら削除したい などなど。 普通はそのタイミングで投稿の内容を変更しますが、うっかり忘れたりしないように本文内で日時指定したいものです。 そこで今回は指定日時によって内容を表示するショートコードを作成します。 PHPでやる方法 日時を指定して投稿を表示・非表示にする場合、PHPのdate関数を使えば簡単です。 <?php if ( date(YmdH) >= "2012052812" ) { //2012年5月28日12時以降 echo "指定日時に表示したい内容"; } ?> たったこれだけです。
公開日: 2015/09/01 | 更新日: 2017/07/05 Googleが提供する、Google Maps JavaScript APIを利用して、ウェブページに地図を表示させる方法を説明します。通常の埋め込み型の地図とは違い、コントローラの調整、マーカーや吹き出しを配置したりなど、機能が満載です。 Google Maps JavaScript API V3 ReferenceGoogle Maps JavaScript API V3 ReferenceGoogle Maps JavaScript APIの公式リファレンスです。全てのメソッド、オプションなどについての解説が掲載されています。準備 (APIキーの取得)Google Maps JavaScript APIを利用するには、APIの有効化と、認証情報(APIキー)が必要です。この章では取得方法を説明します。 アカウントの用
The Bootstrap Blog News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons. Today is a special day for Bootstrap. Not only is it our fourth birthday, but after a year of development, we’re finally shipping the first alpha release of Bootstrap 4. Hell yeah! Bootstrap 4 has been a massive undertaking that touches nearly every line of code. We’re
Photoshop CCをダウンロード Edge Reflow CCをダウンロード 完成したEdge Reflowプロジェクトをダウンロードする 前編に引き続き、Photoshop CCの最新版とEdge Reflow CCの最新版を使用して、レスポンシブなカンプを作るワークフローを紹介します。本記事では、Edge Reflowでレイアウトなどを調整し、仕上げていく過程を説明します。なお、作業のすべては紹介しきれないので、実際に必要となる作業の中からポイントを絞って書いています。 1. 要素の位置やサイズの調整 Photoshopから書き出したEdge Reflowプロジェクトは、横方向の位置や幅が%指定、縦方向の位置がpx指定になっています。つまり、Edge Reflowで読み込んだだけの状態でも、画面の幅に応じて要素の幅や位置が変わるリキッドレイアウトになっています。ただし、要素の位置
Photoshop CCをダウンロード Edge Reflow CCをダウンロード サンプルPSDをダウンロード Webデザインの世界において、Photoshopは決まった幅(固定幅)のデザインを作るツールです。レスポンシブデザインのために、いろいろな幅のデバイスを想定したデザインを作るには、PSDを何枚も作る必要がありました。 この記事では、Photoshop CCの最新版とEdge Reflow CCの最新版を使用して、PhotoshopからデザインをEdge Reflowに書き出し、レスポンシブなカンプを作るワークフローを紹介します。 前編では書き出したものをスマートフォンで見るところまで、後編ではレイアウトなどを調整して仕上げていく過程を紹介します。 必要な準備 Creative Cloudで、Photoshop CCとEdge Reflow CCを最新版に更新してください。
更新日: 2017年9月26日公開日: 2015年6月10日プロ御用達!WEBデザインに役立つデザインツール13選 忙しい web デザイナーの方、web デザイン勉強中の方、CSS やプログラミングからチョット目を離してデザインツールを見直してみませんか? 今までやっていた作業、可視化に時間のかかっていた作業を劇的に変えてくれるツールがたくさん存在します。チョット作業の手を止めて、以下のツールを覗いてみてください。きっとこれからのあなたの web デザインを快適にしてくれますよ! WEBデザインに役立つデザインツール 13選プロ顔負けのデザインツール「webflow」 webflow 対応 / Mac、Windows 価格 / 無料 ~ $84 /月 表示言語 / English Free トライアル / 有 デザインには自信があるけれど、実はプログラミングはチョット苦手、という方にお勧
この記事のポイントは… 主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイキャッチ画像の概要と設定方法を詳しく紹介する記事です。 アイキャッチ画像(サムネイル画像やOGP画像とも呼ばれます)とは、サイト内やSNSのタイムライン上に記事URLと共に流れる記事の顔となる画像のこと。 アイキャッチ画像を利用するために必要な知識、画像の仕様と非デザイナー向けの作成方法、アイキャッチ画像をHTMLのメタ要素OGP内で指定する方法を記事内で詳しく解説しています。 この記事は、2024年01月12日に更新しました! ウェブ記事のアイキャッチとなるタイトルを載せた画像、ソーシャルメディア上で、良く見ませんか?まさにこの文章のすぐ上にある「徹底解説」と書かれた画像も、アイキャッチ画像のひとつです。 この記事は、主に個人ブログやブログ形式のオウンドメディアを運営する皆さまを対象に、アイ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
jQueryを使うと簡単にアコーディオンを実装する事が出来るのですが、CSSでもアコーディオンの作成が可能です CSSだけでアコーディオンを作成 HTML コード <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> <label for="Panel12">ボタン2</label> <input type="checkbox" id="
ども。ナカムラです。 今回はいつもの「やたら上位に食い込みたがるディレクターズマニュアルの記事」と比べるとかなり粒度細かめ。 実際の現場でディレクターがワイヤーを書くその前に「やらなければいけないこと」とその理由について解説してみたいと思います。 ちなみに、お題は「既存コンテンツありのリニューアル with Word Press 案件」と仮定してみます。 さて、ワイヤー書く前にディレクターって何やればいいんでしょうね? とりあえずサーバー周りの情報整理 WordPressに限らず、どんな案件でもまぁ必須。なんかしらCMSを乗せる場合であれば間違いなく事前に確認しておかないと大怪我するアレですね。 とりあえずLAMP動くかどうか?とセキュリティ系の情報くらいは整理しときます。 この辺の情報は1枚のドキュメントにまとめといたほうが後で楽かもですね。 既存のページ調査 リニューアルであれば、まず
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く