誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
2016年に見直したHTML5・CSS3コーディング手法6選 - ICS MEDIA
HTML・CSSコーディングを取り巻く状況は、数年前と大きく変わっています。最近では、2016年11月にHTML 5.1が勧告されたり、2015年8月頃にChromeのブラウザーシェアがInternet Explorerを抜いたりといったニュースがありました。また、2017年4月にはWindows Vistaのサポートも終了するため、今後対応すべきはWindows 7のIE 11以降となります（※）。当たり前だと思っていたコーディング技術を今一度見直す時期にきているのではないでしょうか。本記事では2016年に見直した、今の時代に即したコーディング技術を紹介します。 ※ 参考記事「Internet Explorerサポートポリシー変更の重要なお知らせ - Microsoft」 1. meta keywords設定は検索順位に関係がない ウェブコンテンツのキーワードを指定するmeta keyw
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
游ゴシックではプロポーショナルメトリクスは効果的 WindowsやmacOSに搭載されている游ゴシック体は、仮名が漢字に対してかなり小さめにデザインされています。游ゴシック体ではヒラギノ書体より字間が開いて見えてしまうため、プロポーショナルメトリクスを活用する効果は大きいです。 Webフォントにもプロポーショナルメトリクスは効果的 デバイスフォントだけでなく、Webフォントでもプロポーショナルメトリクスに対応したOpenTypeフォントがたくさんあります。Webフォントに関しては記事「Webフォントサービスの徹底比較！ 和文フォントが使える5つのサービスの利点まとめ」を参考ください。 ▲左側は未指定（和文等幅）の状態でカタカナの開きが大きい。右側はプロポーショナル字形を適用した状態で、カタカナが詰まっている。 対応環境：ほぼすべてのブラウザで利用可能 これだけ便利なCSSですが、どれだけの
エチケットカッター開発秘話 | メンズグルーミング | Panasonic
鼻毛はなぜ必要なのか。 エチケットカッターの話をする前に、そもそも「鼻毛がなぜ生えているのか」ご存知ですか？鼻毛は、雑菌や花粉、ほこりをブロックする「フィルター」としての役割があるんです。とにかくなくせばいいわけじゃない。 だから、エチケットカッターの先端は鼻の穴の奥まで入り過ぎないように、なだらかな「すりばち状」にしています。「フィルター」として必要な鼻毛は残しつつ、外見上見えてしまう、「邪魔な鼻毛」だけが剃れるわけですね。 鼻毛が出ていると仕事ができないと思われる？ 生物学的に大切な鼻毛ですが、チョロリと鼻からはみ出していると、ちょっとまずいことになります。鼻毛にまつわる調査を実施した結果、「鼻毛が飛び出していた」時にドン引きする人は88.0％。これは、髪の毛のフケ（83.6％）や、歯の食べかす（82.7％）を押さえて第1位なんです。女性では、95.2％もの人がドン引きします。さらに
コンバージョン率を劇的にアップさせるための30の心理作戦
By Tim Franklin Photography マーケットリサーチアナリストとして働き、SEOやPPCのスペシャリストであり、かつ心理学をたしなんでいるというニック・コレンダさんが、心理学の視点から導き出した「コンバージョン率を劇的にアップさせるための30の心理作戦」を公開しています。「フムフム、なるほど」というものから、「恐ろしあ……」となる戦略まであり、広告運用やSEOの知識がない人もサービスを使うユーザーとして知っておくべき内容になっています。 Conversion Optimization: An Enormous List of Psychological Tactics http://www.nickkolenda.com/conversion-optimization-psychology/ 30の戦略を見る準備として、運営しているサービスをCTA別に分けてじょうご状
Webページのレイアウトに役立つ20のデザインテクニック
ページのレイアウトをする時に全てが同じ大きさ・形・色だと、それは非常に退屈なデザインになってしまいます。要素を整理し、階層をつくり、重要な箇所にフォーカスがあたるようにするにはコントラストを効果的に使うことです。 レイアウトにビジュアルの興味を加え、デザインを生き生きとさせるコントラストの使い方を紹介します。 色の値(value)とはカラーの明るさや暗さをあらわす用語で、ピュアブラックとピュアホワイトに最もコントラストがあります。だからといって高いコントラストのデザインをつくるために、白黒のカラーパレットにこだわる必要はありません。簡単な方法の一つは、そのカラーからより明るいカラーと暗いカラーをつくり、コントラストを加え、あなたのデザインの特定の場所を目立たせることができます。 シンプルな例として、下記のような暗い背景に明るいテキストは効果的にコントラストをつくっています。背景が写真で、テ
なぜメニュー表示用ボタンの「ハンバーガーアイコン」はダメなのか？
スマートフォンなどのモバイル端末用UIでよく用いられる「三」のマークのアイコンは、ハンバーガーのように見えることからアメリカでは「ハンバーガー」アイコンと呼ばれています。徐々に浸透してきたハンバーガーですが、UIデザインの優劣という観点から見た場合、「劣った醜い撲滅すべきものである」という意見が出されています。なぜハンバーガーがダメなのかについて、ジェームズ・アーチャー氏がデータ分析結果を基に理論的に解説しています。 The Hamburger Menu Doesn't Work - Deep Design http://deep.design/the-hamburger-menu/ 下の画像の赤丸で囲われたのが「ハンバーガー」。モバイル端末UIだけでなくデスクトップUIでも広く普及したアイコンで、クリックすることで主にメニューなど他の追加情報を表示させられます。 ◆不親切 一般的に普及し
かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技
2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
Facebookのいいねボタンをたったの三行で拡大表示させる裏ワザ!! 【グレート・ビーンズ】 福岡
こんばんは、川崎です。 Facebook、うまく活用してますかー^o^/ Facebookの「いいね！」ボタンを自分のサイトに設置して、情報拡散を行っている方もたくさんいらっしゃると思います。 そんな中で、 「もう少し、いいねボタンへの誘導を強化したい！」 「iphoneサイトのviewportの設定では、いいねボタンが小さすぎる！！」 などの問題を抱えている方、いらっしゃいませんか？ いいねボタン、もう少し大きくできたらいいですよねー。 でも、普通のCSSまたはJqueryなどの方法では「iframe」タグの中身まで命令が突破できないので、使えません。 いいねボタンに、オリジナル画像を使うにも、 「カウントがでない」 「APIでオリジナル画像を設定するにしても、そのサイトのいいねボタンを、過去に自分が押していたか分からない」 などの問題が生じてしまいます><; CSSもムリ、JS
作り方知らなくてもOK！ ロングシャドウ用CSSが作れる便利サイト紹介 | PLUS1WORLD
今流行のフラットデザインと相性抜群のロングシャドウが簡単に作れるサイトを紹介します。 ロングシャドウというのは最近Webサイトやアプリなどで見かける、一方向に長く伸びた影を使ったデザインです。平面で奥行きのないフラットデザインに立体感を与えます。Googleもアイコンのデザインにロングシャドウを採用しています。 今現在、このブログのタイトル部分でロングシャドウデザインを採用しています。文字の後ろに長い影ができてますね。 ブログのタイトルをデザインする時に、ロングシャドウ用のCSSを手作業で作るのは面倒なので、簡単にロングシャドウ用のCSSを作れるサイト「Long Shadows Generator」を使いました。 Long Shadows Generator Long Shadows Generator – by Juani このサイトを使うことで、ロングシャドウ用のCSSを簡単に作ること
今流行のフラットデザインの配色を決める時に役立つ ３つのサービス | PLUS1WORLD
最近見かけることが増えた「フラットデザイン」。多くのウェブサイトやアプリでこのデザインを取り入れられています。有名所では最近アップデートされたばかりの iOS 最新バージョン iOS7 もこのフラットデザインを取り入れています。 フラットデザインは無駄な装飾を外した、スッキリとしたデザインが特徴ですが、構造がシンプルになる分、配色のセンスが問われてきます。デザインを専門にやっていない人が、いざフラットデザインをやろうとすると、配色で悩むことになります。 デザイナーではないけど今流行のフラットデザインをやってみたい！ という方のために、フラットデザインの配色を決めるのに役立つ、便利なWebサービスを３つ紹介します！ フラットデザインの基本色が揃った「Flat UI Colors」 Flat UI Colors こちらのサイトにはフラットデザインでよく使われる色のサンプルが集められています。
フラットデザインに即採用！美しい日本語フォント。しかも無料。
最早至る所で見聞きするフラットデザイン。Appleを初めGoogleや各ウェブサービス、アプリケーションのUIでもどんどん取り入れられています。ご存知の通り凹凸が無く巧みに配色を考えられた美しいデザインで、しばらくトレンドとなる事は間違いないでしょう。 そこでやはり気になるのがフォント。こだわりだせば切りが無いものですが、一度これというものに出会うとデザインの基盤として大活躍してくれます。 今回Webで見つけて早速持っているMac全てにインストールしたフォントはこちら。 M+ FONTSの紹介 M+ OUTLINE FONTS はコンピュータなどでの個人利用をはじめ、商業目的での利用、フォント内容の改変、改変後の再配布にも制限の無い、自由なライセンスで公開しているアウトラインフォントです。 海外のフォントはかっこいいのがたくさんありますが、結局英数字だけなので日本語を使用したい場合はバラン
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
ぷるるん新感覚！スマフォでのスクロールが楽しくなるナビゲーション -Jelly Navigation Menu
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CC0ライセンス（フリー）の高解像度写真を2000枚以上集めたサイト「Pexels」 | ライフハッカー・ジャパン
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
手軽にサンプル！ スマホやMacBookに指定した画像をはめこめるサイト「Frame」 | ライフハッカー・ジャパン
フラットデザインに似合うボタンが、スライダーを調整するだけで作れるサイト「2.5dBUTTON」 | ライフハッカー・ジャパン
「画像をなるべく使わずにWebをレイアウトするテクニック」鷹野 雅弘（スイッチ）
