タグ

ブックマーク / blog.fenrir-inc.com (5)

  • アドレスバーすら取り払った、究極の先端的ウェブブラウザ Sleipnir 4 for Mac 、本日リリースです!

    こんにちは、UI デザインの松野です。 日は、Sleipnir 4 for Mac をご紹介します。そう、“4” です! Sleipnir 4 for Mac は、アドレスバーすら取り払った、究極の先端的ウェブブラウザです。 Mac 版で初のメジャーアップデートとなるこのバージョンでは、デザインを刷新! ページをそのまま表示する見やすいサムネイルや、開きたいページを最短で見つけ出す進化した “ポータルフィールド”といった機能を、息をのむような美しくシンプルなツールバーに収めました。 指で触れたら切れそうなくらいシャープで美しいツールバーの高さは、わずか54ピクセル。主要なウェブブラウザより遥かに細いこのツールバーも、Sleipnir 4 for Mac が先端的なデザインであることを表しています。 これまでも斬新で特徴的だった独特のスタイルをいっそう進化させ、地上でもっとも先端的なウェブ

    アドレスバーすら取り払った、究極の先端的ウェブブラウザ Sleipnir 4 for Mac 、本日リリースです!
    aoiro_moon
    aoiro_moon 2013/01/24
    しゃれてるなぁ。デザインはステキだけど、使い勝手はどうかしらん?
  • 高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ

    こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド> Smart Resize > Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的

    高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
  • 【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選

    こんにちわ。坪内です。 突然ですが、この2年ほどで集めた素敵なネットショップを一挙公開しちゃいます。はっきり言って、この記事書いてるだけで、何度もポチリかけたくらい、素敵なアイテムがてんこ盛りです。既に知っているショップも多いと思いますが、知らないショップがあったら是非チェックしてみてください。 ちなみに、数が多すぎて説明文書くのは断念しました。カテゴリ毎には分かれているので、実際にご自身の目で確認してみることをオススメします。

    【保存版】これを見たら、あなたの財布は確実に緩むであろう素敵すぎるネットショップ 101選
  • リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。

    こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか?ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック

    リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
    aoiro_moon
    aoiro_moon 2011/11/14
    何か聞き覚えがあるなぁと思った「MAX塗り」。ブコメ見て納得
  • 【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方

    こんばんは、企画の林です。 今回は iPad 専用ウェブアプリ、Sleipnir Start for iPad の開発で学んだ CSS3 でのアニメーション処理についてお話します。 iPhone / iPad 向けのウェブアプリを作ろうと考えている方で jQuery 使いの人に優しい内容です。 ※ Sleipnir Start for iPad が何か分らない方は前回の記事をどうぞ。 iPad 上のブラウザで、ネイティブアプリのように滑らかにのアニメーションさせるためには jQuery.animate() を使ってはいけません。 CSS3 の transform:translate3d を使って GPU 上で処理させる必要があります。 (jQuery.animate() 関数はお話にならないくらいカクカクした動きになってしまいます。) 上下左右どの動きも transform:transla

    【CSS3】 jQuery を使って iPad でネイティブアプリ並に滑らかなアニメーションを実現する書き方
  • 1