タグ

designに関するaquappleのブックマーク (53)

  • 「aquapple」バージョン9、細かいパーツをRetinaディスプレイに対応&お祝いイラストを頂きました | aquapple

    2013年4月に当サイトをリニューアルしてから1ヶ月。サイトの外観は大きく変わりました[1]が、実は細かい部分の更新が追いついていませんでした。 それが、「アイコン画像」だったり「特定のdiv要素の背景画像」でした。ゴールデンウィークの前半を利用してこれらのパーツも合わせてリデザイン、同時にRetinaディスプレイに対応しました。 今回リデザインしたパーツの一部をご紹介します。 h4タグとh5タグ h4タグは従来、左側に背景画像を用いていましたが、今回から画像の使用をやめ、css3のlinear-gradientに切り替えました。 Amazonの商品紹介 Amazonの商品紹介の背景画像もRetinaディスプレイに対応しました。ヘッダー部分の画像は2倍のサイズで作成し、background-sizeで縮小させています。細かいところですが「Amazon.co.jpで詳細を見る」ボタンも、Re

    「aquapple」バージョン9、細かいパーツをRetinaディスプレイに対応&お祝いイラストを頂きました | aquapple
    aquapple
    aquapple 2013/05/02
    aquappleのテンプレートバージョン9更新時に変更しきれなかった一部パーツを更新、その一部をご紹介します
  • マイクロソフト、25年ぶりにロゴを一新

    米マイクロソフトは現地時間の23日、自社のロゴを25年ぶりに一新したと発表しました。TechNet Blogsも更新されています。 It’s been 25 years since we’ve updated the Microsoft logo and now is the perfect time for a change. This is an incredibly exciting year for Microsoft as we prepare to release new versions of nearly all of our products. From Windows 8 to Windows Phone 8 to Xbox services to the next version of Office, you will see a common look and fe

    aquapple
    aquapple 2012/08/24
    マイクロソフトが25年ぶりに自社ロゴを一新、その理由など
  • Twitterが「青い鳥」ロゴを変更、文字ロゴは使用禁止に

    Twitterは7日、同社のロゴを変更しました。Twitterブログも更新されています。新しいロゴでは青い鳥だけになり、独特のフォントで作られた「t」や「Twitter」の文字は姿を消しました。 今回発表されたロゴと旧ロゴを比較するとこのような感じになります。左が新しいロゴ、右が旧ロゴです。新しいロゴはデザインがシンプルになるとともに、カラーも淡い水色から濃い水色に変更になっています。 これにともない、以前Twitterのサイト上で使われていた、過去のロゴの使用が禁止されました。「t」が半角カタカナの「ヒ」に見えると一時期話題になった「Twitter」ロゴは、私がTwitterを開始した2007年当時から使用されており思い入れがあったので、少々残念です。 蛇足ですが、2007年当時のTwitterログイン画面はこちら。今とは全然異なっていますね。このころは逆に公式に「青い鳥」ロゴは提供され

    Twitterが「青い鳥」ロゴを変更、文字ロゴは使用禁止に
    aquapple
    aquapple 2012/06/08
    Twitterが公式ロゴを変更、「Twitter」文字ロゴは使用禁止に
  • 枠線付きの吹き出し

    ミニブログの隆盛以降ウェブ上でよく見かける吹き出しをCSSで作るお話。単色のものはかなり前に書いた。今回はそれに枠線をつけてみよう! みよう! みよう! Demo: Bordered Speech Bubble 枠線は単なるsolidなborderで少し角を丸めただけ。 尻尾を付ける :before擬似要素を使う。デモの3番目のサンプルのように、まず枠線と同じ色で三角形を作る。三角形は以前のエントリで書いた手法と同じで、左右のborderをtransparentにすることによって作る。 .speech-bubble:before { border-top-width: 16px; border-right-width: 16px; border-bottom-width: 0; border-left-width: 16px; border-color: #369 transparent;

    枠線付きの吹き出し
  • アップル、公式サイトのメニューデザインをリニューアル

    アップルは26日、公式サイトのメニューデザインをリニューアルしました。新しいメニューデザインは家米国のサイトの他、日でもほぼ全てのページで変更されています。 新しいメニューでは文字色が黒から白に変わったほか、背景もボタン風のデザインからいわゆるグラスデザインに変更されました。 ちなみに以前のデザインはこんな感じ。こちらの方は灰色背景に黒文字となっており、どちらかというとボタンに見せるデザインでした。 こちらはさらに遡って2002年8月ごろのアップル公式サイトのメニューデザイン。 当時はまだ第2世代のiPodが発表されたばかりで、トップページのアップルメニューのサブ階層にある「Hardware」をクリックしないと、商品ページまでたどり着けませんでした。今ではiTunesのバックグラウンドプレーヤーとしてのイメージが強いQuickTimeが専用のメニューとして独立していたのも、今見ると驚き

    アップル、公式サイトのメニューデザインをリニューアル
    aquapple
    aquapple 2011/01/26
    アップルが公式サイトのメニューデザインをリニューアル、白文字のグラスデザインに
  • W3C、HTML5の公式ロゴを公開

    W3Cは19日、HTML5の普及を図る為の公式ロゴを公開しました。 あわせて、関連技術のロゴも公開されています。こちらは「セマンティック」のロゴ。 こちらは「オフライン&ストレージ」のロゴ。HTML5アプリはインターネットに接続しなくとも利用できるキャッシュ・ローカルストレージ、DBAPIが完備されています。 こちらは「デバイスアクセス」のロゴ。ジオタグなどの位置情報もHTML5では標準搭載。 こちらは「コネクティビティ」のロゴ。Webソケットやプッシュ通知などのリアルタイム性も重視されています。 こちらは「マルチメディア」のロゴ。プラグインなしで音声や動画の再生が可能。 こちらは「3Dグラフィック&エフェクト」のロゴ。CSS3と組み合わせることでブラウザ内で多様なエフェクトをかけることが可能。 こちらは「Performance & Integration」のロゴ。 そしてこちらが「CS

    W3C、HTML5の公式ロゴを公開
    aquapple
    aquapple 2011/01/21
    W3CがHTML5を普及させるため、公式ロゴを策定
  • MSN Japanがリニューアル、ロゴやリンク色を変更

    MSN Japanは17日、ポータルサイトMSN Japanをリニューアルしました。プロモーションサイトもオープンしています。 新しくなったMSN Japanは3カラムレイアウトで背景が白に変わったほか、フォントにメイリオを採用したことが大きな特徴となっています。 右側にはHotmailへのリンクに加え、mixiやTwitter、Facebookへのリンクも用意されており、トップページからマイミクやフォロワーの近況をチェックすることが可能です。 個人的に気になったのがリンク色。トップページのリンクは全て黒色で、アンダーラインが引かれていません。リンクといえば青色かつアンダーライン付きというのが一般的ですが、リニューアル後のMSNでは青色リンクはありません。 デザイン的には統一感が出ているのかもしれませんが、やっぱりリンクは青色系統にして欲しかったですね。

    MSN Japanがリニューアル、ロゴやリンク色を変更
    aquapple
    aquapple 2011/01/18
    MSN Japanがポータルサイトをリニューアル、背景やフォントなどの変更点を挙げてみた
  • asahi.com(朝日新聞社):高速道路の標識、「ヒラギノ」書体に iPadと同じ - 社会

    新書体を使った案内標識のイメージ。特徴的なのは「越」で、中央と右の部分がはねているほか、部首も従来より滑らかになった従来の書体の案内標識。「越」に省略が目立つほか、「山」の下部を角張らせている  東日、西日、中日の各高速道路会社(NEXCO)は、高速道路の案内標識に使ってきた独自の書体を、米アップルのiPad(アイパッド)などに採用されている市販のものに変えることを決めた。高速走行中でも見やすく、バランスが良いという。書体の変更は、1963年に国内初の高速が開通して以来、初めて。  新しい書体は、大日スクリーン製造(京都市)の「ヒラギノ角ゴシック体 W5」。書籍や雑誌、テレビ番組のテロップなどに広く使われる。文字を構成する一画一画の間の空白の大きさが均等に見えるのが特徴だ。  3社は今年7月、新規開通や付け替えなどで標識を業者に発注する際に、今後はヒラギノを使うよう指示することを決

    aquapple
    aquapple 2010/12/14
    「ヒラギノ角ゴ W5」ってMacにもiPadにも入ってないよね?入ってるのはヒラギノ角ゴ ProN W3とProN W6とStd W8のはず。 / iPadにはW8入ってなかった http://ja.wikipedia.org/wiki/%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E
  • Googleが検索結果に「サムネイル表示機能」を追加

    日々検索結果のアップデートが行われているGoogleですが、今日になってまた新しい機能が実装されました。 それがサムネイル生成機能。ページタイトルの横に追加された虫眼鏡アイコンをクリックすると、リンク先のページがJPEG画像で表示されます。Wikipediaのような一部ウェブサイトでは画像だけではなく、概要文章まで表示してくれます。 自分のサイト名で検索を掛けてみたところ。一部のサムネイルはページを読み込み中に取られたらしく、画像が完全に表示されなかったりしていましたが、10月末に追記更新したばかりのニコニコ動画に高画質動画をアップする方法も、最新のサムネイル画像が反映されています。 ウェブページのサムネイルを生成するサービスは他にもありましたが、Googleがサムネイルを提供してくれるとは思いませんでした。サムネイルの更新も早いですし、APIが公開されるともっと便利になるのではないでしょ

    aquapple
    aquapple 2010/11/11
    Googleが検索結果に「リンク先のサムネイル画像」を表示する機能を追加
  • iTunes 10のウィンドウ操作ボタンの並び方、Windows版では変更無し | aquapple

    iTunes 9からバージョンアップすると気がつく大きな点はこのロゴの変更かと思います。賛否両論ありますが、MacユーザーですとDockに常駐しているアイコンが変わるため、慣れるまではiTunesを起動するのに「あれ?どこいった?」となりそうですね。 そんな中、UIの変更も随所に見られます。個人的に一番気になったのはこの閉じるボタンなどの並び方[1]。この並びがiTunes 9では横でした。 それがiTunes 10から縦並びになっています。おそらくスペースの都合上、縦に配置した方が無駄がないと判断したのでしょう。前々から信号機っぽいなーとは思っていましたが、この並びにされるともう信号機にしか見えなくなってしまいます。 気になってWindows版も確かめてみましたが、残念ながらiTunes 9と同様のデザインのままでした。iTunes 7までの「むりやりメタリックにした」感のあるデザインに

    iTunes 10のウィンドウ操作ボタンの並び方、Windows版では変更無し | aquapple
    aquapple
    aquapple 2010/09/06
    iTunes 10で変更になったUIのうち、気になるボタン類をWindows版と比較
  • 50 High Quality Fonts Every Designer Must Download | Creative Nerds

    August 16th, 2010 Freebies There are so many free fonts all around the web these days and sometimes it makes me think is their any really point purchasing fonts. I’ve decide to collect 50 fonts which are suitable for web, print, etc just overall high fonts which can be used in design projects. This is just personal collection of our free fonts to date, i hope you enjoy and free to leave a comment

    50 High Quality Fonts Every Designer Must Download | Creative Nerds
  • Gmailがリニューアル、連絡先やToDoリストの利用が簡単に | aquapple

    Googleは11日、Gmailをリニューアルしました。最大の変更点はデザインの変更と、連絡先の機能強化となっています。 Gmail の新機能の概要に公開されたデザインの変更点は次の通り。 [メール] リンク、[連絡先] リスト、[ToDo リスト] リンクを Gmail の左上に移動しました。 [メールを作成] をリンクからボタンに変更しました。 ヘッダーのスペースを小さくして、受信トレイの先頭のメールの位置を画面上で 16 ピクセル上に移動しました。 これまでメールの上部にあった [すべて]、[選択解除]、[既読]、[未読]、[スター付き] などのリンクを、[アーカイブ] ボタンの横にあるプルダウンメニューのオプションにしました。 強化された連絡先の機能は次の通り。 連絡先をメールと同様に操作。連絡先でもキーボード ショートカットを使用できるようになりました。メールを選択、ラベル付けす

    Gmailがリニューアル、連絡先やToDoリストの利用が簡単に | aquapple
    aquapple
    aquapple 2010/08/11
    GoogleがGmailをリニューアル、連絡先を強化
  • 「aquapple」バージョン8始動 | aquapple

    2010年6月20日にサイトのヘッダー回りを中心にブラッシュアップを行いました[1]。WordPressに移行してから29日で1年になるのを前に、今回のテンプレートのバージョンを「8」としました。 バージョン8のコンセプトは大きく分けて次の2点。 Twitterの全面導入 Twitter自体は今よりも全然知名度が低かった2007年の4月からはじめていたのですが、ブログとそれは相容れないものだと思い、当時はブログに導入する考えはまったくありませんでした[2]。 あれから3年。今やテレビでも取り上げられるほどの有名なサービスに成長し、手軽かつほぼリアルタイムに今を伝えるサービスとして、ブログとは違った方向に進化を遂げています。私の中でもTwitterの存在感はずいぶん大きくなり、今回のバージョンアップを機に全面導入することにしました。 Internet Explorer 6のサポート終了 そ

    「aquapple」バージョン8始動 | aquapple
    aquapple
    aquapple 2010/06/20
    WordPressへの移行1周年を前に、デザインをブラッシュアップしました
  • Firefox 4.0のUIモックアップが公開、ダイアログボックスが廃止に - aquapple

    MozillaのデザイナーであるStephen Horlander氏は現地時間の1日、次期Firefoxであるバージョン4.0のユーザーインターフェースのモックアップ画像を公開しました。公開された画像から、次期Firefoxでは「ダイアログボックスの廃止」が予定されていることが明らかになりました。 具体的には、ツールメニューにあったオプションなどが挙げられます。オプションを表示している間は親ウィンドウの操作を一切受け付けない状態になっており、オプション画面を開いたままウェブページを見ることができない、バックグラウンドにオプション画面が開いてしまうと応答無しになったように見えるなど、不都合な点が多くありました。 今回公開されたモックアップではこのオプション画面がタブとして表示されていることがわかります。これならオプション画面を表示したまま他のページを見ることが出来ますし、オプション画面が親ウ

    Firefox 4.0のUIモックアップが公開、ダイアログボックスが廃止に - aquapple
    aquapple
    aquapple 2010/06/04
    MozillaのデザイナーであるStephen Horlander氏が自身のブログで次期Firefox 4.0のモックアップ画像を公開
  • Google、ロゴが1日限定でパックマンゲームに - aquapple

    Googleのトップページがパックマンになっています。これまでも記念日やことあるごとにロゴが変わっていましたが、今回はキーボードやマウスでプレイ可能なパックマンゲーム[1]です。 普段はI’m Feeling Luckyとなっているボタンも今日は「Insert Coin」ボタンになっています。このボタンを押すと2人プレイができるようになる仕組み。2PはキーボードのWSADキーで操作可能です。 パックマン (Pac-Man) はナムコ(現・バンダイナムコゲームス)より1980年5 月22日に発表されたアーケードゲーム、またはそのシリーズのタイトルで同社の看板タイトルである。世界で最も知られた日産のコンピュータゲームの一つで、アメリカではその知名度から80年代のミッキーマウスと称された。 via パックマン – Wikipedia 今日はパックマンの誕生から30周年を記念してのロゴ変更となっ

    Google、ロゴが1日限定でパックマンゲームに - aquapple
    aquapple
    aquapple 2010/05/22
    Googleのロゴがプレイ可能なパックマンゲームに
  • Googleの新しい検索結果ページに採用された「ナビゲーションパネル」を非表示にするuserContent.cssを公開します | aquapple

    Googleが2010年5月5日頃から格的に検索結果のページをリニューアルしています。ネット上では賛否両論となっていますが、私はどちらかというと今回のリニューアルは改悪と考えています[1]。 特に左側に新設された「ナビゲーションパネル」が常時表示されているため、検索結果の1件目の表示領域が狭くなってしまい閲覧性が著しく低下していると考えています。 数日間静観していましたが、Google側で非表示にする選択肢が与えられませんでしたので、FirefoxのuserContent.cssを使ってスタイルを書き換えることにしました。このスタイルシートを使うとどうなるかというと… 改悪された検索結果ページが… こうなります。左側に常時されていたナビゲーションパネルが非表示になり、代わりにボタンを設置しています。このボタンにマウスを乗せると… 従来左側に表示されていたパネルが現れる仕組みです。 このス

    aquapple
    aquapple 2010/05/11
    Googleの新しい検索結果ページに採用された「ナビゲーションパネル」を非表示にするスタイルシートを公開します
  • Twitterのトップページに新着ツイート数が表示に | aquapple

    Twitterのトップページにまた新しく機能が追加されたようです。15日の夜にTwitter / ホームを見てみたところ、新着ツイート数が表示されるようになっていました。 自分のホームを開いた直後は何も変化がありません。が、しばらく眺めていると… するするっと黄色いリボンが現れ、「新しいツイートが142件あります」と表示されました。リボンはリンクが張られており、それをクリックするとページがリロードされ、新着ツイートが表示されるようになっています。 便利なことに、この新着ツイート数はブラウザのタイトルにも表示されるようになっています。ウィンドウを最小化していてもタスクバーに「(1,127) Twitter / ホーム」と表示されており、これを見れば新着ツイート数が1,127件あることが一目で分かる仕組み。 この機能は現在順次対象ユーザが拡大しており、もうしばらくすると誰でもこの機能を利用でき

    Twitterのトップページに新着ツイート数が表示に | aquapple
    aquapple
    aquapple 2009/11/16
    Twitterのトップページに新着ツイート数が表示される機能が順次拡大中
  • Twitterの「投稿数」表示が「ツイート」に変更に - aquapple

    今年の7月にTwitterの「投稿数」表記が「Tweets」へ変更になりましたが、先日再び変更が加わりました。 今回は日語化が行われ、「ツイート」になっています。 こうして並べてみると、フォロー数やフォロワー数を表示している数字もフォントが変更になっていますね。前の方が格好良かったかも。

    Twitterの「投稿数」表示が「ツイート」に変更に - aquapple
    aquapple
    aquapple 2009/10/23
    Twitterのプロフィールページの「Tweets」表記が「ツイート」表記に変更に
  • 一部ページの表示が乱れていました | aquapple

    2009年10月19日から21日にかけて、一部ページの表示に乱れが生じていました。ご迷惑をおかけしました。現在は復旧しています。 ページの表示に乱れが発生していた期間 2009年10月19日 午後8時37分 ~ 10月21日 午後6時3分 表示に乱れが発生していたURL https://aquapple.com/ https://aquapple.com/2009/10/formula-1-season2009-round16/ 原因 2009年F1グランプリ 第16ラウンド「ブラジル」の記事において、タグの閉じ忘れがありました。このため、このページを表示しているホームでも表示が乱れていました。

    一部ページの表示が乱れていました | aquapple
    aquapple
    aquapple 2009/10/21
    タグの閉じ忘れによる、ページの表示の乱れについて
  • iida callingがリニューアル、CPU・メモリ使用率ともに低下 | aquapple

    auのコンセプトケータイ、iidaのスペシャルサイトがリニューアルしていました。以前はページにアクセスしただけでCPUとメモリをい尽くすというとんでも仕様でしたが、今回のリニューアルでその点については解決されています。 これが新しいiida callingのトップページ。URLは以前と一緒です。以前はCPU使用率が60%を超えていましたが、今回は一般的なFlashサイト並みの17%に落ち着いています。 メモリ使用量もサイトを開く前と開いた後では30MB程度しか変わりませんね。前回の失敗が行かされている気がします。 以前より一画面に表示されるレコードの枚数をぐっと減らしたほか、一度にメモリにバッファする仕組みを取りやめたことで「コンセプトが分かるサイト」になったのではないでしょうか。

    iida callingがリニューアル、CPU・メモリ使用率ともに低下 | aquapple
    aquapple
    aquapple 2009/10/14
    CPUとメモリを食い尽くしたiidaのスペシャルサイトがリニューアルしていた