WordPressの記事から見出しを自動で探し出し、リンク付きの「目次」ナビゲーションを設置するためのスクリプトを紹介します。 jQueryも一切使っていないです。 プラグインを使いたくない！って方は是非参考にしてみてください。 1. 見出しタグやブログのHTML構造を確認する まずは準備として、現在使用しているテーマのHTMLソースの構造を把握しておきましょう。 目次にしたい見出しは何番のHタグを使っているのか まずは見出しタグから確認していきましょう。 例えば下の画像のように、記事のタイトルがH1タグで、 大見出しはH2タグ、中見出しは全てH3タグで書いてあるパターンなどがあると思います。 ほとんどこんな感じかと思いますが、たまに大見出しも全部h1タグだったりするので確認しておきましょう。 今回は このパターンを例にしたスクリプトを紹介していきます。 記事を囲っているdivタグなどのI

素敵なインターフェースを心がけ、ユーザーエクスペリエンスを格段に改善することができる、UIデザインの重要ポイントを具体的なHTML/CSSのサンプル例と一緒にご紹介します。これらの各ポイントは、もともと@steveschogerがTwitterでツイートした内容となります。 1. アイコンはラベルよりも少しだけ明るくしよう。 文字ラベルの横にアイコンを配置するときは、少しだけ色を明るくしてみましょう。こうすることで、もっとも重要な情報（文字ラベル）をうまく強調することができます。 See the Pen Little UI Details : 小技テクニック01 by PhotoshopVIP (@vipcrew) on CodePen. 2. 明るい背景色では、白文字に少しだけ影を追加しよう。 背景色が明るく、白文字を利用するときは、文字に少しだけ素敵な影を加えることで、より読みやすくな

ウェブサイトやアプリケーション制作の現場で、非デザイナーが度々デザイナーからフィードバックをもらう内容をアバウトに4原則にまとめました。デザインは理論だそうで、以下に挙げるようなポイントさえ抑えれば非デザイナーでも「ハズさない」デザインをつくることができます(デザイナー談)。 追記[09/23/2015]：参考文献について 本記事は以下に掲載しております参考文献「ノンデザイナーズ・デザインブック(Robin Williams)」の前半部分における要所を引用して作成しています。デザイナーの方が非デザイナーにアドバイスする際に非常に有用な本らしく、私自身受けたフィードバックもこの本の内容に基づくものでした。予想していた数百倍の反響があり心底ビビっていますが、これをきっかけにデザインに興味をもち更に自分で勉強していくきっかけとなれれば本望です。わかりやすくデザインのポイントをまとめてくれた参考文

For Developers..All Froala products are built for developers. As a HTML5 and CSS3 library, the Froala Design Blocks is clearly no exception. Learn more ..and Designers tooSketch, PSD you name it. Froala Design Blocks is the tool that helps developers and designers speak the same language. Learn more

ランディングページで使用されているヘッダ・フッタ・ナビゲーション・フィーチャーコンテンツ・アクションボタン・ソーシャルコンテンツなど、最近のWebデザインで採用されているアイデアがまとめられたGood Web Designを紹介します。 Good Web Design まずは、上部に配置するナビゲーション。 最近のトレンドは細いバーが多く、ロゴは左端か中央に配置し、右端にはアクションボタン、その横にグローバルナビゲーションを3-5個のアイテムが用意されています。

デフォルトのWordPressのサイト内検索機能は、正確な文字入力をしないと検索結果が表示されません。 たとえば、「WordPress」と英単語で検索すると、カタカナの「ワードプレス」が出てこなかったり、関連するキーワードまで正確に入力する必要がある為、ページ量が膨大だと目的のページを探すのも大変なことがあります。そもそも検索する内容のキーワードの綴りがうろ覚えだと、全く目的のページが探せないこともありますね。それと毎回検索結果ページを表示させるのもちょっと面倒です。 そこで、Google検索のようにサジェストが表示されればいいのになぁ、と思っていたところ偶然見つけたのが「Algolia」という検索プラットフォームです。WordPressのデフォルトのサイト内検索に検索候補を表示する機能（インスタント検索）を実装することができるので、検索結果ページを表示することなく、らくらくと検索でサイト

Nick Babichはエンジニアであり、ＵＸの愛好者です。テクノロジーに対して情熱をもっています。彼は10年間ソフトウェア業界にて、開発を専門として仕事をしてきました。彼は数々の興味の中で、宣伝や心理学、シネマなどを重視しています。 検索は、ユーザーとアプリ/Webサイト同士の会話のようなものです。ユーザー側は必要な情報を問い合わせ、アプリやWebサイト側は検索結果をもってそれに対応します。 ユーザーは検索をするとき、作業がスムーズに行われることを期待します。そして大抵、１、２回ほど検索した結果の質によって、アプリやWebサイトを即座に評価してしまいます。 検索とその裏側のUIをデザインするとき、考慮すべきたくさんの事柄があります。みなさんが読みやすいように、この記事では検索のベストプラクティスを検索ボックスのデザインと結果ページの配置の２つの領域に分けて紹介しています。 Webサイトご

noteのコア体験は、「読む楽しさ」と「書く楽しさ」だと考えています。 本来ならコア体験は、調査でしっかりと導くべきものです。しかしアカデミックなUXとは異なり、実際のスタートアップ環境では時間とリソースに限界があります。このため調べながらも、走り出さなければなりません。 まず序盤はヒューリスティック（経験）ベースのデザインを行いつつ、調査やテストが可能なところから、裏づけやチューニングを行う流れになりそうです。 以下、「読書体験」における「可読性」のパートのメモ。noteチームにとりあえず提案する予定の諸々です（現時点では個人の見解です）。基本的には「当たり前のことを、当たり前に」やる予定。「これもやっとけ」的なことがあれば、タイポグラファーの諸先輩の方々には、ぜひご意見をお伺いできればと。 書体をサンセリフ系に変えるべきか？デジタルでは、一般的にサンセリフ体の可読性は、ローマン体よりも