社長の宮坂がゲスト出演した、11月27日放送のテレビ東京系「カンブリア宮殿」。Yahoo!ニュースの裏側にも触れられており、ご覧になった方もいらっしゃるかもしれません。 (放送バックナンバー:爆走する国民的サイト!これがネットの底力だ!- テレビ東京) 公式ブログ新コーナー「news HACK」ではこれまで、Yahoo!ニュースにおけるスマホ利用の成長などをお伝えしてきましたが、今回は、同番組の中でも登場したYahoo!ニュースのUI改善事例について、番組で触れられなかった部分も加えて詳しくお伝えしたいと思います。 これからご紹介するのは、スマホブラウザ版Yahoo! JAPANトップページのA/Bテスト事例(※Yahoo!ニュースのアプリ版との違いなどについては、こちらの記事をご参照ください)。 テスト結果は現在のスマホ版トップページに使用されているものと同様ですが、まず具体的な説明に入
これで十分でしょ! Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも! アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで! ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
たいしたページではありません。 あるのは言葉だけ。 それをあなたは読んでいます。 オシャレなデザインや、レスポンシブなレイアウト、魔法のようなスクリプトに私たちは魅了されてしまいました。 でも、ウェブで一番強力な道具は、今も昔も言葉です。 私が書いた言葉を、あなたが読んでいる。これこそ魔法です。 私はブリティッシュコロンビア州の小さな都市にいますが、あなたは別のどこかにいることでしょう。私は2013年6月20日の早朝にこれを書きましたが、あなたは違う日時にこれを読んでいることでしょう。私はノートパソコンでこれを書きましたが、あなたは携帯電話でこれを読んでいるかもしれないし、タブレット端末やデスクトップ端末で読んでいるかもしれません。 私とあなたがこうして繋がることができたのは、私が書いた言葉をあなたが読んでいるからです。ウェブとはそういうものです。場所や端末、タイムゾーンが違っても、このシ
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
半透明のパネルにテキストを配置したり、ナビゲーションを半透明にしたりなど、ウェブデザインでよく利用される透過のエフェクトの効果的な使い方と注意点を紹介します。 Using Transparency in Web Design- Dos and Don'ts 下記は各ポイントを意訳したものです。 はじめに コントラストを作るために透過を使う イメージの重要な部分は隠さない さまざまなレベルの透明度を使う 透過するとテキストが読みやすくなるとは限らない 透過を使うのは少しのスペースに 激しいコントラストの画像には透過は置かない 透過をアートとして使う 透過を飾りとして使用しない 背景に透過を使う 同時に多くの透過のエフェクトは使わない 循環するイメージに透過を使用する おわりに はじめに 透過を使ったウェブデザインは非常に美しいですが、慎重にデザインする必要があります。透過はカラーのブロック・
少ない手間と知識でそれなりに見せる、ズルいデザインテクニック with Sass / Compass (English Version) https://speakerdeck.com/ken_c_lo/zurui-design-technique-english-version 第一回…
このシリーズでは Web Design101(WD101)と名付けて、ウェブデザインをより深く理解するための最初の一歩になる知識やノウハウをコラム形式で紹介していきます。 Webは見た目のコントロールがきかない モニターの外をデザインするのが大半である Webは寛容性をデザインする場である Webサイトのデザインは、グラフィックデザインやエディトリアルデザインと同じような感覚でデザインをすると、柔軟性・拡張性が欠けたものになるだけでなく、特定の環境でしか見れないものになることがあります。 こうなるひとつの要因として、グラフィックデザインやエディトリアルデザインが、特定の環境で見るということを前提にしてデザインしているからだと考えられます。A4の紙であったり、名刺サイズだったり、特注のコーティングを施したビルボードなど、決められた枠の中で世界を作り上げるデザインに対し、Webは枠があるようで
fu_mouがやってきた!ヤァ!ヤァ!ヤァ! 既にフロアアンセムと化しているGreen Night Paradeを引っさげての待ちに待ったリリース。 Preludeから始まる5曲、そしてPandaBoYによるリミックスを含めた全6曲、そうです、音楽ってのはこんなにも楽しいものなんです。 美しく刻まれたLantern Paradeのリミックスからフロア号泣必至のカービィネタアンセムGreen Night Paradeまで、 このEPは僕らにあらゆるポップを提示してくれている。 2011年、5番目の月、12番目の日、今日ここで始まったグリーンに輝く小さなパレードにみんなで笑って涙しよう。 奇跡も、魔法も、あるんだよ。 文章: RE:NDZ a.k.a. kz (livetune)
2013年3月23日 Webデザイン, インスピレーション ミニマルデザインを考えるときによく使われる言葉「Less is more(少ない事は効果的だ)」。装飾が多すぎるとどれも目立たなくなる、無駄を削ぎ落した方がより美しく効果的であるという考えです。これに対し「Less is bore(少ない事は退屈だ)」という皮肉な言葉もあったりします。美しいミニマルデザインと退屈な間抜けデザインは紙一重。その違いを考えてみましょう。 ↑私が10年以上利用している会計ソフト! ミニマルデザインとは そもそもミニマルデザインとはなんなんでしょう?Wikipediaを見ると ミニマル・デザイン(Minimal Design)は、あまり使用しない機能のせいでシステムが肥大化することを避け、必要最小限の機能に絞って設計することをいう。 とあります。冒頭でも書いたとおり、要素が多すぎると結局なにが主張したいの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く