Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Category Archives: 未分類

[Apple] MacBook 12inch Keyboard – MacBook 12inchのキーボードはAirと比べてどう変わったか

  • Pocket
  • このエントリーをはてなブックマークに追加

昨日発表されたMacBook 12インチのキーボードは、既存のMacBook Airと比べてどう変わったを比較できるアニメーションGif。画像落ちた時のためにこっちにも置いておきます。アニメーションGifで切り替わるんだけど、escキーの長い方が新しい12インチのキーボードです。ちなみにASCII配列なので、日本語配列だとまた変わると思います。大きな変化としては、まずキー間のマージンが減った事。あと方向キーの左右が大きくなった事かな。あとFキーが縦方向に小さくなってる点も特徴。ちなみに日本版のキーボード配列は、Apple Japanを見てもまだ画像がないみたい。わたくし今回の12インチ買う気満々だったんですが、色々考えた結果スルーしようかと思っちょります(Core Mってのがネック)。けどゴールドモデル買ってこのステッカー貼るとシャア的にめちゃめちゃかっこイイんじゃないかという点に気づいて、先ほどからモンモンとしております。

[Texture] Transparent Textures – 透過処理されたタイルパターン配布サイト

  • Pocket
  • このエントリーをはてなブックマークに追加

透過処理されたタイルパターンテクスチャの配布サイト。各テクスチャはDownloadボタンを押すと透過PNGとしてダウンロードできます。透過処理されてるという事はテクスチャのさらに背景にある色が反映されるわけで、このサイトではページの最も後ろにある背景色を好きなように変更できます。実際にテクスチャがどのように見えるかを確認しながら選ぶ事ができます。また各テクスチャをクリックする事で、ページの背景を任意に変える事もできます。汎用性の高い透過テクスチャを確認しながら選ぶ事ができる点がとってもナイスです。

[Javascript] FlexNav – レスポンシブレイアウトに対応したドロップダウンメニュー

  • Pocket
  • このエントリーをはてなブックマークに追加

レスポンシブレイアウトに対応したドロップダウンメニュー。ブラウザウィンドウが一定の幅以上ではドロップダウンメニューとなり、それより小さくなるとアコーディオン形式に変化します。サイトのセッティングではスマホやiPadのポートレイト(縦位置)ではアコーディオン、それより大きい場合はドロップダウンメニューとして機能してました。深いナビゲーション構成のサイトにおけるレスポンシブレイアウト対応のよくある例なので、それ系のデッカいサイトを制作する際に使えそうです。

[Design] Dieter Rams: ten principles for good design – ディーター・ラムスの“デザインの10か条”

  • Pocket
  • このエントリーをはてなブックマークに追加

アップル好き、またはインダストリアル・デザインの経験がある人にはお馴染みのDieter Ramsの“デザインの10か条”が紹介されてます。わりと有名な内容なので知ってる人も多いだろうけど、彼の作例を交えながらひとつひとつ丁寧に解説がなされています。デザインに関わる人なら知ってて損のない内容かと。わたくし個人的に「Good design is thorough down to the last detail」と「Good design is as little design as possible」が特に好きであります。いやまぁ全部大事なんだけどね、引き算のデザインって美しいなぁと思うのであります。

[Color] tool for official brand color codes – 様々なWeb系ブランドのカラーコードをまとめたサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

様々なWeb系ブランドのキーカラーを抽出したサイト。複数の色が使われるブランドにおいては、それらの配分についても分かりやすく紹介されてます。また各カラーパレットにマウスオーバーする事で16進法、RGB、HSLそれぞれの色指定を見る事ができ、クリックでクリップボードに色情報が転送されます。有名どころをいくつか抽出すると、Adobe, Android, Amazon, Delicious, Devient Art, Digg, Dropbox, Evernote, Facebok, Instagram, Pinterest, Skype, Twitter, WordPress, Youtubeなどが挙げられます。なんかこうサービス名を羅列している最中、あーなんか自分って多くのWebサービス使って生きてんだなぁ・・・とか思いました。いやまぁ便利なのはイイ事なんですけどね。

[UI Design] 40 Quality Examples of iOS User Interface Designs – クールなiOS Appのユーザーインターフェース作例

  • Pocket
  • このエントリーをはてなブックマークに追加

iOS Appのクールなユーザーインターフェース作例をまとめた記事。Appが実在するしないは別として、単純なデザイン作例として見るのがイイかと。いやこれ集められてる作例の質なかなかスゴいっす。かっけーの多いです。なんつーかこういうの見てて思うんだけど、アプリの内容とかUI/UXはもちろん大事なんだけど、単純に美しさは力だなと、そんな風に思いました。ツール系のアプリってこうした見た目の美しさ、あと品の良さって大事ですよね。

[Javascript] tiltShift.js – JSとCSS3で行うティルトシフトレンズのエフェクト

  • Pocket
  • このエントリーをはてなブックマークに追加

JSとCSS3を使って行う、ティルトシフトレンズ風のエフェクト。デフォルトで画像の上端と下端がボケてて、マウスオーバーでトランジションとともにボケが取れます。コーディングフェイズで行う可逆エフェクトなので、ひとつの画像で(ボケ前とボケ後を用意せずに)この動作が行えます。最近じゃInstagramなどで誰でも簡単にティルトシフトエフェクトの画像を作れるようになっちゃいましたが、やっぱなんつーかオシャレですよねこういうの。

[Website Gallery] One Page Love – シングルページサイトばかりを集めたギャラリーサイト

  • Pocket
  • このエントリーをはてなブックマークに追加

ページ遷移なしの1枚モノのWebサイトばかりを集めたギャラリーサイト。最近じゃ一時期ほど見なくなった印象もあるけど、コンテンツの見せ方としてこういうシンプルなサイトは個人的に大好きであります。JSなどを使って動きのある見せ方をするサイトと、スクロール芸で見せるサイトと大きく2種類ありますね。ミニマルなコンテンツの見せ方をしたい場合の参考に是非。