Introducing our new Summer breeze release. Try now for free ->
![Zeplin](https://cdn-ak-scissors.b.st-hatena.com/image/square/d2d3cfc0d64f8cb63f5de407d43767db8579d390/height=288;version=1;width=512/https%3A%2F%2Fcdn.sanity.io%2Fimages%2Fwd3e2pma%2Fproduction%2F716ae55a149ff63038853cb19d0c17676d406676-1200x600.jpg%3Frect%3D29%2C0%2C1143%2C600%26w%3D1200%26h%3D630)
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか? ヒートマップツールを使う
OGP画像シミュレータとは? FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 (2014年01月
作成:2012/10/29 更新:2016/10/22 Tool > 低スペックPCやウィンドウ幅の狭いノートを使っている場合、ソフト立ち上げを躊躇してしまう時がありませんか?そんな人に「シンプル、軽い、簡単」のウェブ上で使えるツールをご紹介。ブラウザ内で開けるので無駄なスペースを取られません。 ※こちらの記事は2012年に書いたもので、情報が古くなっております。比較的最近のツール系のまとめは、Web制作に役立つトレンドのツール一覧と以下の2つご覧ください。(※ 2015/06/25 2015/06/28追記) Node.jsとgulpをインストールして使うまでの入門記事 これからGit を始めてみようという人のための使い方と入門フロー 特にウェブ屋さんやブロガーさん達が使っているのをピックアップ。 もちろん僕も頻繁にガシガシ使ってるので「ツール用ブックマーク」としてこのページを作りました
#fw-container /* Main container */ { } header /* Header */ { } .fw-feed-title /* Feed title & link */ { } .fw-feed-title a:link /* Color */ { } #fw-feed-items-scroll-area { } #fw-feed-items { } .fw-feed-item /* Item container */ { } .fw-feed-item-url /* Item URL link */ { } .fw-feed-item-image-module /* Thumbnail module */ { } .fw-feed-item-image /* Thumbnail */ { } .fw-feed-item-content-module /*
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s w
基本 以下の形式で、指定したサイズの画像を作成することができます。 https://placehold.jp/{幅}x{高さ}.png 例) <img src="https://placehold.jp/150x50.png"> 背景・文字の色サイズを変更する https://placehold.jp/{文字色}/150x100.png https://placehold.jp/{背景色}/{文字色}/150x100.png https://placehold.jp/{文字サイズ}/{背景色}/{文字色}/150x100.png ※背景色・文字色はRGBの16進数表記 例) <img src="https://placehold.jp/24/cc9999/993333/150x100.png"> ファイルフォーマットを変更する URL末尾の拡張子で、pngとjpgの2種類が指定可能です。
ホームページを運営し、改善施策を実行していくなかで、ホームページ内のデザインの微修正や画像の追加が必要になる場面が多々あるのではないでしょうか。 外部や社内のデザイナーに依頼する際は、仕様書を作成して、修正内容を確認して、修正されたら成果物をチェックして、必要があれば再度修正依頼をして…と、ちょっとした修正でも思った以上に工数がかかってしまう場合があります。 そんな時、ちょっとした修正や画像作成であれば自分でできるようになっておくと、上記のような工数を一気に短縮することができます。 今回は、ノンデザイナーでもある程度のレベルのデザインを作成するために役立つ知識やサービスをご紹介します。 1. 【非デザイナー必見!】知っておくべきデザインの基礎法則6つ https://ferret-plus.com/641 デザインは感性によるものが大きいというイメージがあるかもしれませんが、デザインにはい
Photo by ITU Pictures こんにちは。谷口です。 プログラミング初心者の方々、プログラミングを学びたい方々は、普段どのような方法で学習をしていますか? 最近は、Web上でコーディングができるサイトや、プログラミングを学習できる動画コンテンツなど、独学での勉強に役立つサービスが増えてきました。そこで今回は、初心者でも独学でプログラミングの基礎を楽しく学べるサービスを11件ご紹介いたします。 ■初心者でもプログラミングして実行できる!学習サイト ◆1.Codecademy http://www.codecademy.com/learn 学習可能言語:HTML/CSS、Ruby、Python、PHP、JavaScript、jQuery 対応言語:英語(一部日本語) 料金:無料 Codecademyは、実行環境を構築しなくても、書いたコードを実行できます。サインインすると実際にW
あやしいサイトや知らないサイトを訪れる前に、URLを入力するだけでサイト背景情報を調査したり、迷惑メールの送付経路を表示したりすることが出来ます。
ここ数年盛り上がっている"プログラミング学習"。 無料または安価で学べるサービスが国内でも少しずつ増えてきている事や、従来よりも安価でプログラミングを学べる講座が登場してきていることから、小中学生から大人まで幅広い世代の人がプログラミングに挑戦している。 一方で、挑戦してみたものの結局挫折してしまったという人も一定数いるのが現状。特に平日の夜や休日などの空いた時間に独学で学んでいるという方の中には、苦労している人も多いのではないか? そこで今回は、プログラミング学習に挫折してしまった経験がある人や、これから独学でプログラミングを学ぼうと思っている方には是非一度試してみてほしい、無料のプログラミング学習サービス「Progate」を紹介する。 スライドと演習を中心とした無理のない実践的なスタイル 「Progate」の特徴は無料であることはもちろん、学習の進め方と非常に使いやすいサービス設計にあ
WordPressには、いくつかのプログラム言語が利用されています。 具体的には以下のような言語です。 PHP HTML CSS JavaScript(jQuery) 細かなことを言えば、他にも使用されているものはありますが、ユーザーが編集するものと言えば大体はこの4つです。 今回は、これら4つの言語のコードを綺麗に整形してくれるツールの紹介です。 コード整形ツールとは コード整形ツールとは、書き方の定まっていないプログラムコードなどを、記法を統一して綺麗に書き直してくれるツールです。 WordPressテーマ作成や、カスタマイズで、コードをググッてよそからコピペ編集で使うときなどに、自分に合った記法に変換して使えます。 例えば、以下のようなことを、まとめて行いたい時に使うと、手動でやるより編集時間を大幅に短縮できます。 コードに適切なインデントを自動で設定する インデントをタブからスペー
このページでは 16x16, 24x24, 32x32, 48x48, 64x64 の5つの画像を含むマルチアイコンを生成します。 16x16のみ、16x16と32x32の2個、などのアイコンも作成可能です。 入力された画像は指定サイズに拡大縮小されます。 長方形の画像を指定した場合は正方形に変形されます。 透過情報を含むPNG画像も指定可能です。 指定した大きさの画像がアイコン内に作成されます。 16x16の画像のみ作成する場合は16x16に画像を指定して下さい。 32x32の画像のみ作成する場合は32x32に画像を指定して下さい。 同時に複数画像を指定すると、マルチアイコンになります。 16x16と32x32に画像を同時に指定すると2サイズのマルチアイコンになります。 16x16,24x24,32x32,48x48,64x64すべてに同時に画像を指定すると、5サイズのマルチアイコンにな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く