数字が美しい書体選びの秘訣とは？すぐに使える Google フォント20個まとめ付
「数字」にフォーカスを当て、書体の選びかたやデザインの秘訣ガイドラインを学びながら、実際に使えるフリーフォント素材20個をまとめてご紹介します。 数字デザインを選ぶときの原則事項 著者 Samantha Zhang の働く Graphiq では、データ表やチャート、インフォグラフィクスなど、細かい数字をいつもたくさん扱っています。データの視覚化では、 ほとんどのデータで Helvetica（ヘルベチカ）書体を利用していますが、フォントを選ぶときのガイドラインがいくつあります。 1. ライニングと等幅ライニング数字を選ぼう。 まずよい数字フォントを選ぶコツとして、ライニングまたは等幅ライニング数字かどうか確認しましょう。 ライニング数字（英: Lining Figures）とは、ベースライン（英: Base Line）とキャップ・ハイト（英: Cap Height）の高さが揃っていることを指
入力フォーム改善でCV率1.6倍！成果を上げる18のテクニック | LISKUL
たかが入力フォーム、されど、入力フォーム。 ユーザーが入力フォームに入力しているとき、もう気持ちは「購入します！」「申し込みます！」と決まっているはずです。 しかし、入力フォームが使いにくいために、せっかくの顧客をのがしてしまう可能性があるのです。 サイトへの流入はあるのに成果が上がらない・・・。 フォームPV数とコンバージョン数に差がある・・・。 そんな時には入力フォームを見直すべきかもしれません！ 入力フォームについて書かれている16の記事、サイトを参考に、結局、なにが重要なのか、基本と応用合わせて18のテクニックを厳選し、事例を交えてお伝えします。 入力フォーム改善の威力、条件を知ることで、成果を上げる入力フォームを作ることができるはずです。 失敗しない入力フォームを選ぶ！【LISKUL特集（2019年版）】CVR改善ツール一覧>> ※本記事は2014年7月29日に公開された記事をL
EFOツールでCVR20倍！成果改善に必須のツール12選 | LISKUL
EFOとは「entry form optimization」の略で、その名の通り、「エントリーフォームの最適化」を指します。これを、専門知識がなくても手軽に実施できるのが「EFOツール」です。 みなさまが管理しているエントリーフォームは、離脱対策ができていますでしょうか？ フォームでの離脱率は平均8～9割と言われており、この数字からして、フォームで多くの顧客を逃してしまっているということが分かると思います。そのため、対策を何もしていない場合、フォームの改善（EFO）は急務と言えます。 今回は素早く、しかもHTMLなどが分からなくても、自動でフォーム最適化（改善）を行ってくれる、EFOツールを紹介いたします。 すでにEFOツールの利用をご検討されている方も、ぜひご参考ください。 1.EFOツールは「フォームを使いやすくし、ユーザの離脱を防ぐ」施策を簡単に実施できるものネットショップで商品を買
LDSports乐动体育下载_主站
FILE: /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/App.class.php LINE: 101 #0 /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/App.class.php(101): E('\xE6\x97\xA0\xE6\xB3\x95\xE5\x8A\xA0\xE8\xBD\xBD\xE6\x8E\xA7...') #1 /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/App.class.php(202): Think\App::exec() #2 /home/wwwroot/wxzhenrong.com/ThinkPHP/Library/Think/Think.class.php(120): Thi
少しのコードで実装可能な20のjQuery小技集
2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します！「jQueryってなんだ？」という人もコピペで実装できますよ！サンプルも用意したのでぜひご覧ください！ ↑私が10年以上利用している会計ソフト！ 追記：この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です！詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基本的な使い方 まずはjQuery本家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます
Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
CSS3の勉強になるかも！？画像を使わないボタンの作成手順
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
ユーザ・インターフェースのためのイージングカーブをつくる | POSTD
フラットデザインの導入以来、アニメーションの質が、今までにないほど、優れたインターフェース作成のために必要不可欠なものとなっています。モーションデザインを通して、製品の総体的なブランドエクスペリエンスを左右するようになり、製品を、市場の他のものと差別化する要素となりました。アニメーションは複雑なインタラクションを簡素化し、優れたデザインを記憶に残るユーザエクスペリエンスにしました。では、質の高いアニメーションはどのように作られるのでしょうか？ イージングカーブは多くの要となるコンポーネントの1つで、適切なアニメーションをとり、素晴らしいものに作り上げます。 問題なのは、イージングカーブがどのように機能するかについての理解が、少々難しいということです。 前回の記事 After Effects to CSS で触れたタイミング関数への興味の派生としてこの記事を書きましたが、この記事を読むことで
擬似要素とCSS3を使ってリストメニューを楽しくデザイン
画像を使わずに擬似要素を使ってリストメニューをデザインしてみました。CSS3のtransitionを使った動きのあるメニューも作ってみました。 まずはHTMLから <ul class="rist-menu" id="list1"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">PHP</a></li> <li><a href="#">Ruby</a></li> </ul> classでリストとリンクに関することを指定して、これはすべてのサンプル共通になっています。idで擬似要素に関する内容を指定して、サンプルごとで変わっています。 1つのページに複数のサンプルを設置するためこのようにしましたが、実際設置するときは1つだと思い
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
知っておくと効率的！コーポレートサイト制作が捗るjQuery プラグインや使い方まとめ
作成：2014/04/7 更新：2014/11/01 Web制作 > あの企業サイトで使われている効果やテクニックをまた探さないといけない、そもそもどういったキーワードで探したらいいのか分からない。そんなこんなで、今回は奇抜なものではなく、「企業サイトで見たことある！」というような、コーポレートサイトに使えそうな定番のプラグインや作り方をまとめました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スライドショー １．カルーセル（横） ２．フェードアウト ３．画像と文字をスライド ４．文字が遅れて移動する効果 ５．異なるタイミングを設定できる ナビゲーション・メニュー ６．多階層 ドロップダウンメニュー ７．多階層 効果つき ８．スマホではドロップダウン ９．スマホではセレクトメニューに １０．Amazon風 メガドロップダウンメニュー １１．横スライド １
Hover.css - A collection of CSS3 powered hover effects
2D Transitions Grow Shrink Pulse Pulse Grow Pulse Shrink Push Pop Bounce In Bounce Out Rotate Grow Rotate Float Sink Bob Hang Skew Skew Forward Skew Backward Wobble Horizontal Wobble Vertical Wobble To Bottom Right Wobble To Top Right Wobble Top Wobble Bottom Wobble Skew Buzz Buzz Out Forward Backward Background Transitions Fade Back Pulse Sweep To Right Sweep To Left Sweep To Bottom Sweep To Top
CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
爆速でHTMLコーディングするためのtips - Qiita
心構え ・HTMLは最小限にする ・JSも最小限。不要なら ・デザインとか全部決まってから手を付ける。 開発環境 ・リアルタイム入力補完ができるエディタ （プログラマならEcripseとかEmeditorとか、MacならCodaか） ・動作確認の InternetExplorer ＞Macで動いてWindowsでレイアウト崩れた！Windowsが悪い！ ←なに言ってんだ・・・？？ ・おまけでDreamwaver。 下準備 ・予め画像を切り出しておく。 HTMLコーディング開始 ・画像切り出しは全部後回しにして、 ZencodingでHTMLを「一気に」組む。 HTML”だけ”組む。 IDやclass名もここでつけちゃう。 ブラウザで開くとめちゃくちゃだけど気にしない。 文字も入力しない。 画像やCSSパスを設定する。 ・作ったHTMLをDreamwaverにコピペして、 Dreamwave
Googleアナリティクスの曜日・時間別の掛け合わせデータからユーザー像を推測する - makitani.com
曜日別や時間別のサイト利用状況といったアクセス解析レポートは、ある種「古典的」なデータです。今回は、Googleアナリティクスを利用して、その「曜日軸」と「時間軸」の組み合わせでより立体的にユーザー像を捉えていくと同時に、PCやモバイルの「デバイスカテゴリー軸」を加えて、より詳しくユーザー像や行動を推測していく取り組みを紹介します。 古典的な「曜日別」「時間別」レポートだけではなく、両軸の組み合わせとデバイスカテゴリー軸を加えてユーザー像の理解に活用する Googleアナリティクスには、曜日別や時間別のサイト利用状況を把握できる標準レポートは、執筆時では準備されていません（注）。ただし、値は取得しており、ディメンションと呼ばれる項目は準備されているので、カスタムレポートなどで利用できます。例えば「サイト全体の曜日別や時間別の、訪問やコンバージョンの状況」をまとめたカスタムレポートは、独自に
CSS3のFlexboxを基本から理解して、使い方をマスターしよう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、王です。デザイナーやってます。 今回は「Flexboxを基本から理解して、使い方をマスターしよう！」ということで、初耳の方でもざっとFlexboxで何ができるか分かるように短い動画を用意しました。 動画の中で使ってたデモをアップしたので、確認してみたい方は以下のリンクをどうぞ！ デモ 昨今では、当然ながらデジタルデバイスサイズの多様化でレスポンシブデザインとやらが流行っています。 同じサイトをさまざまなスクリーンサイズに応じたデザインをしなければならない上に、コーディングにも手間がかかります。制作側からしたら何かと厄介ですよね。 「なるべく手間をかけずに作りたい！」という世界中のデザイナーの声に応えて、「Twitter Bootstrap」をはじめとした数多くのフレームワークが徐々に脚光を浴びはじめて久しくなります。 ただ、これらはあくまで古い技術の組み合わせで、革新的な技術で
4つの参考事例から学ぶ、ランディングページの成果を3倍にするコツ | LISKUL
広告や宣伝等の集客施策で集めたユーザを総受けするランディングページはWEBマーケティングにおいてとても重要ですが、多くの企業のランディングページはその役割を果たせていません。 それらのページに定石を踏まえた修正を加えただけで、成果が2倍3倍と向上したというケースが多々あります。 大手企業がトライアンドエラーを繰り返して作りだした成果を出せるランディングページを参考に交え、ランディングページを作成する際に「ここだけは抑えておけ」というポイントをご紹介いたします。 （参考：ランディングページ制作会社の一覧 ≫） 勝ち組企業が使用しているランディングページのベーシックな型本来、失敗しないランディングページを作るためには、相当数のトライアンドエラーが必要となります。 しかしそれには、かなりの費用と労力が必要となり、容易に実行することは困難です。そこで、トライアンドエラーを繰り返した大手企業がたどり
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptタスク自動化ツールgulpのAPI説明と実践的な利用例
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
新着記事
