最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめランディングページやブログなど、最近のWebサイトで見かけるヘッダのアイデア・実装方法を紹介します。 スクロールすると、ヘッダのイメージがズームしたり、フェードしたり、ヘッダの形が矩形でなかったり、ナビゲーションだけがスティッキーになったり、実用的なアイデアが満載です。 各デモは「Run Pen」をクリックすると、動作します。 まずは、スクロールすると、ヒーローイメージがズームするヘッダ。 HTMLは非常にシンプルで、CSSもJSもシンプルなので、コピペで簡単に利用できます。
もう、レスポンシブでいいんじゃない？
先月末、藤井さん の働く株式会社ザッパラスさん にお邪魔して、レスポンシブWebデザインの基本のキ的なお話しをさせていただきました。 題して「もう、レスポンシブでいいんじゃない？」 いま、改めてレスポンシブWebデザインについて考えるきっかけになれば、という視点で内容をまとめてみました。 4年前に「レスポンシブWebデザイン 制作の実践的ワークフローとテクニック 」という本を執筆したんですけど、そのころからウェブ制作のデフォルトはとりあえずレスポンシブでいいんじゃない？と思っていたのですが、最近、その思いがより強くなっています。職場のウェブサイトをレスポンシブでリニューアルしてから約5年が経ちますが、やっぱり、あの時レスポンシブを選択しておいてよかったとつくづく感じています。おかげで、Googleさんがモバイルインデックスを優先するという昨今のニュース にもあまり翻弄されなくてすんでいます
Designers Guide to Web Performance Optimization
Performance is one of the biggest issues we face on The Web today. As the weight of the average page continues to rise, discussion around performance on most web teams quickly descends into the realm of development optimization. The reality is that performant web experiences begin with treating performance as an essential design feature. In this article, we’ll be looking specifically at ways that
色覚異常で困ること 改善されてほしいこと - 最終防衛ライン3
色弱の僕がとりあえず困ること - 今日はヒトデ祭りだぞ！ ヒトデさんが色弱で困ることを挙げていたので、同じく色弱（色覚異常とも）の私も困ることを書いておこうかなと。 ついでに、色覚異常の仕組みと、人類に色覚異常が生じた経緯などもまとめようと思います。 色弱なのか色盲なのか、色覚異常なのかは議論の分かれるところですが本稿では色覚異常で統一したいと思います。 ヒトデさんの記事には色覚検査の図がありますが、私は左上から「見えない、12、見えない、17、70、5」です。ただし、ディスプレイでは環境により色味が異なるため、気になる方は印刷物で正確な検査を行いましょう。色覚異常で無ければ、右下は「見えない」のが正常です。ちなみに1色覚で色の区別がつかない人は「12」すら見えません。 一時期、色覚テストを受けてみたら何故か低IQとか同性愛者ってことになってた - Togetterまとめ で紹介されるよう
たてよこWebアワード2017
日本語組版において、縦書きと横書きの選択肢があるということは極めて自然なことですが、Webサイト制作の中で自由な組版を実装するための技術はこれまで標準化されておらず、縦書きの実装はJavaScript等による強引な手段でしか実現できないという問題を抱えていました。 私たち『縦書きWeb普及委員会』は、縦書きと横書きが混在する日本語組版の文化をWebに継承し、自由な組版を実装するための規格をWeb標準とすべく、Webに関連する各種技術の国際標準化団体であるW3Cと協議を重ねながら、CSSにおける新たな組版規格である〝Writing Modes〟の標準化に向け、様々な取り組みを行なっています。 『たてよこWebアワード2017』は、こうした取り組みのひとつとして、CSS Writing Modesを用いた縦書き実装の指標となるような優れたWebサイトを表彰することを目的としたアワードです。 縦
色覚多様性を再現するSVGフィルター
多くのウェブ制作者達が色覚多様性について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚多様性を再現するSVGのフィルターを作った。 Repository: Color Blindness Emulation filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <svg xmlns="http://www.w3.org/2000/svg" version
word-break: break-all
英単語の間であっても自動改行されるように、word-breakプロパティーでbreak-allを採用しているウェブサイトが地味に増えているような印象だ。コスメティックな理由で見出しやサムネイルの付記などに使うのは悪くない妥協だと思うが、本文にもわりと気軽に使われていてかなり気になる。 日本語では特に単語の切れ目という論理的な箇所は存在せず、ブラウザーではどこでも自動改行される。せいぜい句読点が行頭にならないように制御されるくらいだ。word-breakプロパティーではこの自動改行における単語の禁則処理を制御できる。値としてbreak-allを指定すると禁則処理が解除され、現在のブラウザーの実装では以下のような事象が起こる。 英単語の間で改行される 行頭でも記号が許可される 前者がわかりやすく、これを目的としていることが多い。こうすることによってタイポグラフィーでいうところのflush le
Grid 日本語版
なぜ、レスポンシブに労力を費やすのか? 私達は全てのデバイスにおいて、スクリーンのサイズや縦横の方向といったユーザーの環境に左右されずに、ウェブサイトが利用しやすくなることを目指しています。 断片化された世界 2013年現在、数千種類のデバイスとスクリーンサイズがインターネットにアクセスしています。それら全てに対して、それぞれレイアウトを設計するのはもはや不可能です。そんなことより、デザインにより流動的なアプローチを取り入れるべきでしょう。 モバイルファースト 最近になって「モバイルファースト」という言葉がそこらじゅうで聞かれるようになりました。その言葉は、モバイル向けのスタイルから始めて、必要とされる時に大きなスクリーンに最適化したスタイルを適用するということを意味します。言い換えると、作成したモバイル向けのスタイルがデフォルトになり、それ以降に書き換える必要はないということです。それは
スクロール・ハイジャッキングなど
変なスクロールとか呼ばれちゃったり、邪悪とかゴミとか散々な感じ。どちらかというと実装上の問題ではなくて、見る方と作る方(発注元で実装者ではない)とでウェブサイトの目的への意識がずれていることが原因なんじゃないかと考えている。 見る方は何かしらの情報を得られるとかそういう目的でスクロール・ハイジャッキングがなされるウェブサイトをそれを知らずに開き、スクロールしようとしたら「なんだこれクソが」となる。実際ユーザーが制御できないウェブページというのは邪悪であるわけで、その感想で間違ってはいないんだけど、その前提としてウェブサイトは有用な情報を効率良く届けるただそれだけのものという意識がある。 一方、作る方はこういったカスタム・スクロールを使ったウェブサイトを作ると決めた場合、それはもっと芸術的なウェブサイトを意識しているはずだ。情報の提示そのものではなく、よりプレゼンテーション寄りで、いわば(イ
BreakpointTesterとish.
少し前にBreakpointTesterというツールを知った。任意のページでそのブックマークレットを起動すると、参照されているCSSファイルをスキャンしてMedia Queriesのブレークポイントを探し、そのブレークポイント全てを使ってiframe要素で表示しなおしてくれるというもの。また、ほぼ同時期にish.というツールがBrad Frostにより公開された。こちらは大中小でチェックでき、リサイズも可能というもの。こちらもデバイスを特に意識はしていない。しかし、両者は似ているようで少し違う。 ish.はメジャーなデバイスを強く意識することをやめ、あらゆるデバイスでコンテンツが機能するようにしようというコンテンツ側からの視点で作られているように思う。対してBreakpointTesterはビジュアル・デザイン側からの視点で作られており、どのようなビジュアル・デザインを作成したのかをチェッ
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
(いわゆる)パララックス演出手法とそのバリエーションについて | nodot
(いわゆる)パララックス手法が大流行である。理由の一つにはある種の快感の存在があると思われる。ウェブページ閲覧の際の最も主要な操作である縦方向のページスクロール。この操作に連動した動き、想定外ではあるものの、スクロールとの相関によりあくまで自分が操作している感覚が得られ、こちらの渡邉恵太氏の記事にもあるような自己帰属感を得られる。これが快感の正体ではないかと考える。 (快感なんかなくね? という意見があったので追記) 簡単に言えば、本来マウスを触ってカーソルが動くだけでも面白くて身体拡張感覚由来の快感があったのである。しかし慣れることによって、ホイールを回して画面がスクロールすることはもはや当たり前すぎて身体拡張感覚など得られなくなっている。しかしデフォルトの挙動以外に新たなインタラクションを導入することでこれを再び感じられる。つまり言いたいことは「インタラクションは気持ちいい」ということ
ひさかたの » 同人サイトとは思えないクオリティ！コミックマーケット84新刊特設サイトまとめ
こんにちは。あめです。 冬の申し込みも終わって完全に終わった夏コミの話題。いまさらですが、夏コミ前は自分のサークルで手いっぱいだったので！ 自分用もメモも兼ねての、ハイクオリティなC84特設サイトのまとめです。 最近の同人誌は、ほんとにデザインが綺麗。 個人サークルが普通だった一昔前と比べて、デザインに凝って何人かでサークル活動してる方が目立ってきました。 やっぱり東方やボカロ界隈の、音楽×イラストのコラボサークルなんかが普通になってきたからなのかな。あと評論×デザインのコラボも増えてる気がする。 そんな素敵な同人誌・同人CDの夏コミ新刊の特設サイトをまとめました。コーディングしてるのは、同人好きな本職のクリエイターさんが多いようですね。 ごはん部の本2 本のタイトル：ごはん部の本2 サークル：ごはん部 ごはんもイラストも装丁もwebもとーっても素敵な本のサイト。私にドストライ
takram laboratory » 1時間で日本縦断してみた
Googleマップをよく使っている方ならピンときたかもしれません。 答えはGoogleマップのストリートビューを利用可能なエリアです。 昔は主要都市だけだったエリアが、今や日本全てをカバーしようとしています。 「それって、もしかしてストリートビューだけで日本縦断旅行できるんじゃね？」 などと思いついてしまったらやらざるを得ないのが人情というもの。 しかしストリートビューをポチポチとクリックしながら進むのは面倒くさすぎてとてもやってられません。 そこで見つけたのがHyperlapseというツール。ブラウザ上でストリートビューをアニメーションに変換してくれるというものです。 「なんだ、これ使えば楽勝楽勝♪」と思ったのも束の間、このHyperlapseを調べてみるとどうやらあまり長いアニメーションはできないということが判明。ストリートビューで使われている大量の写真を全てメモリ上にキャッシュす
CSSメディアクエリの正しい使い方（動画）
メディアクエリを正しく使うとWebページがどのデバイスでも正しく表示されます。OSや画面の大きさに関わらずデザインがレスポンシブになり、CSSがメンテナンスしやすくなります。このビデオでサンプルページを利用してメディアクエリの正しい使い方（つまりブレークポイントの利用）をご紹介します。
「近江牛」でGoogle上位のEC、脱・縦長ページで復活 (1/3)
Googleで「近江牛」と検索すると最上位に表示されるECサイトがある。インターネット黎明期ともいえる1997年に、本格的にECに参入した『近江牛.com』である。10年以上にわたって実績をあげ、業界内での評価も高かった同サイトが、2011年10月、全面リニューアルした。そのリューアルの目的や成果について、『近江牛.com』店主の新保吉伸（にいほ よしのぶ）氏と、リニューアルに携わったゴンウェブコンサルティング社長 権成俊（ごん なるとし）氏、同社ウェブコンサルタントの村上佐央里（むらかみ さおり）氏が、全国で約600社のECサイトが加入するOSMC（オンライン ショップ マスターズ クラブ）が主催するセミナーで語った。（3月23日に東京で開催されたセミナーの内容を、再構成してお届けします） Googleで「近江牛」と検索すると最上位に表示されるECサイトがある。インターネット黎明期ともい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Blog | Welcome to Adobe Blog
海外向けサイトに適したデザインとは？ 外国人が好むフォントや色彩感覚 | 一人でできるWebサイト収益UP術－ウェブ解析士事例集
Flat UI - Free Bootstrap Framework and Theme
はてなハイク サービス終了のお知らせ