Category: ニュース記事

CSS3
winmonaye

Retinaディスプレイ対応のレスポンシブなメニュー

この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナル記事へのリンク 3つのレイアウトで様々なブラウザ画面サイズに対応する、レスポンシブでタッチフレンドリーなRetinaディスプレイ対応のメニュー作成方法 今日は、ボーダーランズ(Borderlands)ゲームの武器メーカーMaliwanが打ち出す様々な色からインスピレーションを得た、多彩なRetina対応のレスポンシブなメニューを作成していきます。このメニューはブラウザのウィンドウサイズに合わせ、自動で次の3つの異なるレイアウトのうちの1つに変化します。「デスクトップ」向けの横1列表示バージョン、タブレット向けに最適化された縦2列表示バージョン、そして最後は、ナビゲーションを表示/非表示するためのメニューボタンを備える、より小さな画面のモバイル向けのバージョンです。 メニューを完全Retina対応とするため、アイコンフォントを使います。アイコンフォントを使うと、リサイズ時にメニューのアイコンの品質が低下する(ボケて滲んで見えたりする)ことがなくなります。 個々のCSSプロパティをサポートするブラウザ上でのみ実現される効果もありますので、ご注意ください。 アイコンフォントを準備する 独自のアイコンフォントを作るというと少々面倒な感じがするかもしれませんが、IcoMoonなどのツールを使えば、要はアイコンを作ってそのツールにインポートするだけです。アイコンフォントは他のあらゆるフォントと同様に機能するため、色の変更やサイズの指定が簡単にでき、品質が低下することもありません。異なる画面の解像度に合わせてアイコンを用意する必要がなくなり、Retina対応デバイスに最適です。 まず最初に、メニュー用のアイコンを作る必要があります。私はイラストレータを使いますが、例えばInkscapeなどのベクタグラフィックスエディタであればどれでも構いません。アイコンをそれぞれ作成したら、それら一つ一つをSVGファイルに書き出します。アイコンをあらゆるブラウザで適切に機能させるためには、各アイコンごとに、すべてのラインを完全にオブジェクトに変換し、それらのオブジェクトをすべて統合して1つの大きな形にする必要があります。すべてをSVGファイルに書き出したら、それらのファイルをIcoMoonアプリケーションツールにインポートします。 IcoMoonから提供されている膨大なライブラリのアイコンを使って、作成したフォントの見栄えをさらに良くすることもできます。必要なすべてのアイコンが揃ったら、ページ下の「Font」ボタンをクリックし、詳細設定のページに移ります。このページでは、エンコーディングの設定を選ぶことができるほか、各アイコンに文字を付けるかどうかの選択や、Private Use Area(画面を見た第三者によるアイコンのアウトプットを禁止する)を使用するかどうかの選択ができます。私個人としては、デフォルト設定での使用をお勧めします。それで十分機能するからです。 「Download」をクリックすると、4つのフォーマット(SVG、EOT、TTF、WOFF)のファイルがまとめられたZipファイル1つと、CSSファイル、デモページが生成されます。 アイコンを使えるようにするため最初にしなくてはいけないのは、IcoMoonから提供されたCSSをコピーして、自分のCSSファイルのトップにコピーすることです。また、フォントフォルダをコピーするのも忘れないようにしましょう。「a little “hack” to make fonts look nicer on Chrome Windows」も併せて読まれることをお勧めします。 メニューのHTML 今回のナビゲーションのHTML記述は以下のような感じです。 アイコンフォントを使うため、「icon-iconname」クラスをi要素(span要素でも同様に機能します)の中で用います。また、no-jsクラスをbodyに追加していますが、Modernizrを使った場合にはこれはjsとなりますので注意してください。これは、ユーザがJavaScriptを無効にしていた場合にメニューを開いたままにしておくためのものです。 CSSとJAVASCRIPT ここでは、CSS3プロパティにベンダープレフィックスを付けませんが、ファイルの中にはベンダープレフィックスが付いたものがあることに注意してください。 すべての画面サイズに適用されるグローバルCSSは次のようになります。 最初に、ナビゲーション全体に対してちょっとしたトランジション効果を追加してみます。ホバーされているものを除き、その他のすべてのアイテムの不透明度を下げるというものです。 次に、すべてのアイテムに対してちょっと素敵な感じの背景色を追加してみたいと思います。以下の記述では、リストアイテムを選択するのにnth-childを使っています。これで、好きなだけリストアイテムを追加でき、色指定のコードも追加した分だけ繰り返し実行されます。 Media QueryのMin-width属性を使うことで、800px(50em:bodyのフォントサイズが15pxで)よりも大きい画面を対象として、リストを横一列のナビゲーションに変化させることが可能になります。 継続してnth-childの選択テクニックを使い、メニューアイテム毎に異なる色を持つ4pxのボーダーを追加します。このテクニックを:hover疑似クラスに適用するだけでなく、タッチデバイスやキーボード・アクセスにも対応できるよう:focusと:active疑似クラスにも適用します。 次に、アイコンとテキストを配置します。 ホバー時にアイテムの高さをアニメーションで変更するよう設定します。 次にアイコンの配置位置を指定し、かつアニメーションによる高さの変更にも対応できるようにします。 視覚的な効果をつけるためにボックスの影をアニメーションで表示し、その影のサイズを0.8emから0に変更、また色も透明からより不透明度の高い色へと変更します。ここで最初のmedia-queryを閉じます。 ここで2つ目のmedia queryを使って、800px~980pxのサイズの画面向けに若干調整を施します。 これで「デスクトップ」バージョンの設定が終わり(1024px以上の画面を持つタブレットが続々と出てくる今日、その辺について大きな疑問をお抱えだとは思いますが)、800pxより小さい画面(ここでは49.938emに相当)用に、media query のmax-width属性を使って「グローバル」CSSの処理をします。 520px(32.5em)~799px(49.938em)のサイズの画面には、2桁3行のレイアウトのメニューを表示するようにします。ユーザーが各アイテムを容易に「タップ」できるようにパディングを追加し、また、アイコンを左側、テキストを右側に表示させるようにします。 大きな画面用のアニメーションを小さい画面にフィットさせるのはかなり厄介なため、より簡単かつ慎重なやり方でボーダーをシンプルに表示させることにします。ここでmedia queryを閉じます。 ここで再度、より小さな画面用にフォントサイズと幅を指定します。 非常に小さな画面についてはナビゲーションを非表示にしておき、ユーザがクリックするとナビゲーションを表示する「メニュー」ボタンを表示させるようにします。JavaScriptのコードでこれを実現します。 HTMLをすっきりさせるために「メニュー」ボタンを作り、JavaScriptを使ってDOMツリー内に挿入するという方法を取りました。changeClassファンクションにより、ユーザがボタンをクリックした際クラスがactive/クラスなしの間で切り替わります。 小さい画面向けバージョンのために必要なものがすべて揃ましたので、以降CSSでスタイルを指定していきます。以下は、メニューボタンのスタイルを指定する記述です。 デフォルトでメニューボタンは非表示になっています。サイズが519px (32.438em)以下の画面向けには、このボタンを表示させることにします。 ボタンがクリックされると、ナビゲーションの高さをアニメーションで変更するように指定します。ナビゲーションを閉じるときのためには高さを0em、開くときのためには最大の高さとして30emを指定します。JavaScriptが有効になっていない場合には、ボタンが表示されないため、no-jsクラスを使って常にナビゲーションを表示させるようにします。 JavaScriptが有効になっている際には、デフォルトでメニューを非表示にしておき、ユーザがボタンをクリックすると(activeクラスを取得し)表示されるようにします。 より小さなサイズの画面には、アイコンを左側、テキストを右側に持つアイテムから成る縦1列のリスト形式でナビゲーションを表示させるようにします。 素敵な色付きの8pxのボーダーも各アイテムの左側に追加します。 デスクトップ上で小さな画面用のバージョンをテストした場合にはナビゲーションは美しく表示されますが、モバイルデバイス上だとアイテムをタップするのが難しいかもしれません。Modernizrを使えば、デバイスのタッチ機能の検出が可能です。デバイスにタッチ機能があれば、touchクラスがbodyに追加されます。このクラスを使うことで、ナビゲーションアイテムを少し拡大させることができ、ユーザがより簡単にタップできるようになるため、タッチデバイス上での体験レベルが向上します。ここで最後のmedia queryを閉じます。 これでデスクトップ/タブレット/モバイルデバイス上で快適に機能するタッチフレンドリーなRetina対応のナビゲーションの完成です。皆さんに気に入っていただけると嬉しいです!

詳細を読む »

CSSフレームワーク inuit.css を紹介

inuit.cssという単語を耳にするようになって、まだそんなに時間は経っていないかもしれませんが、今回は「それが何なのか」「それで何が出来るのか」「誰の役に立つのか」「誰が使うべきなのか」などと言うことをここでまとめてみようかと思います。 inuit.cssはCSSのフレームワークです。けれどinuit.cssの場合はその一言では収まらない気がします。グリッドシステムでもないし、boilerplateでもありません。ましてやスタートポイントでもありません。inuit.cssはフル装備で守備範囲の広いフレームワークなのです。面倒な手作業の90%をカバーするようデザインされているため、WEB立ち上げの際にやらねばならない退屈な作業はinuit.cssに任せて、我々は楽しい部分に集中していればいいのです! この記事は、http://csswizardry.com/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 拡張性 inuit.cssはプラグインを持つ数少ないフレームワークです。そしてこのプラグインのことをinuit.cssではigloosと呼んでいます。 igloosは、もう既に充分機能的なフレームワークに、更に機能を追加拡張してくれます。例えばパンくずリストや、IE6のサポート、ドロップダウンメニューといった様々な機能の追加が可能です。 精力的なアップデート inuit.cssは、今の執筆時点(2011年6月)ではまだ御年たったの2か月です。なのに既にバージョンは1.0から2.5まで進化しています。フレームワークを改善、洗練、更に機能的にする為のアップデートが20回も行われています。 多くのフレームワークが停滞したりないがしろにされていく中で、inuit.cssは人々のニーズに対応すべく向上拡張する為に、コミュニティからのフィードバックを常に大切にしています。 プラグマティック(実用主義) inuit.cssは革新的な膨張システムを備えている、非常に実用主義なフレームワークです。万人受けするようにではなく、その環境に適用するパフォーマンスを優先しています。例えばIE7でもきちんと動作しますが、Firefox 4ならば尚更よく動作します。と言ったような・・・。inuit.cssはWEB開発に賢明なアプローチを取っています。 いつでもディベロッパーの心の友に! inuit.cssはディベロッパーが費やす時間、労力、メモリーの節約を念頭に置いています。フレームワークのほんの小さな側面が、ディベロッパーの作業を軽減することを唯一の目的として追加されました。.endクラスの呪縛からの解放(.endクラスを使ってグリッド行の最後のカラムからマージンを削除する方法)や.gridクラスの省略などは全てエンドユーザーの使い勝手を考慮して追加されました。 誰が使うべき? 素敵なデザインはあるけれど、あんまりメモ帳は好きではない方 素晴らしいアプリを作れるけれど、定められた時間内にその場で適当なCSSを得られないプログラマー ブラウザーテストの大半をお任せしたい人(inuit.cssはIE7以上と他の全てのブラウザでの動作を確認済みで、IE6をサポートするiglooもあります。) 速やかにラウンドプロジェクトを実行する必要があるけれど、品質に妥協はしたくない代理店の方(inuit.cssは色んな巧み技を持ってますよ。) CSS入門者で、真っ当なスタートポイントを求めている方 レスポンシブサイトの考え方が好きで、でもリサーチ用のリソースをまだ持っていない方 もしくは実装している方々 WEBサイト制作者ならどなたでも! もしinuit.cssを見て下さった方。もしくは既に使ってくださっている方!みなさんからいただくフィードバックは、今後の改善向上の為に非常に貴重なご意見となります。どうぞお気軽にTweetやコメントを残してくださいね。

詳細を読む »

ウェブ開発者に必要不可欠な35の技術

世の中では様々な用途の為にWebアプリケーションが用いられており、Webディベロッパーにとってはウハウハな今日この頃だと思います。Web開発業界にもモバイルデザインから携帯アプリに至るまで、フロントエンド開発やosCommerceやWordPressなどと言った特定のプラットホーム開発者など、幾つもののニッチ市場が存在します。 その中で最も急成長しているニッチャーの1つはもっとバックエンドワークを好み、Webサイト全体のアプリケーションを作成するのが得意な人たちです。本来ならば自分たちのアイデアを生かしゼロから目的に合ったサイトを構築するべきだと思いますが、多くのクライアントが既存のプラットフォームを用いて自社サイトを構築するようになってきています。ここがニッチャーWebディベロッパー達の狙い目でもあるわけです。 今回のアーティクルではWebディベロッパーがWebアプリケーションを作成する際に、そのアプリケーションがクライアント用であろうとも個人的なプロジェクトであろうとも知っておくべき技術やスキルをご紹介したいと思います。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 有益なサーバーサイド・スクリプト言語の一例 Web全体のアプリ開発者とフロントエンド開発者の決定的な違いは、サーバーサイド・スクリプト言語の知識の有無です。サーバーサイド言語とはサーバー上で実行される言語であり、より多くのプログラミング機能がありデータベースにアクセスし操作することも可能です。PHP、Perl、Ruby、ColdFusion、Java、ASPなどがその一例です。Webアプリケーション用の最も一般的で効率的な言語としては、PHP、Ruby、ASPが挙げられるでしょう。そしてこの中でASPは主に政府機関や大企業使用されています。個人で取り扱う場合にはPHPやRubyがベストな選択と言えるでしょう。そして何がいいって、この2つともオープンソースなんです。更に詳しい情報はWhich Server-Side Language Is Right For You?のサイトを参考にしてみてください。 Image credit: laughingsquid Webディベロッパーになりたての頃は、割と多くの人が本来必要でもない複数の言語を習得しようとします。けれどこれは間違いです。最初の頃こそは自分に合う言語はどれなのか幾つか試してみるのは良いと思いますが、更に度を越して幾つもの言語を習得しようとするのは単なる時間の無駄に過ぎません。1つ選んだらそれに拘って、その言語をより深く学ぶことに焦点を当てるべきです。ベストプラクティス(最優良の事例)や構文を学び、スニペットやスクリプトを収集し、人気の高いフレームワークを試してみる事です。(CakePHP for PHP、Ruby on Rails for Ruby、ASP.NET for ASPなどが良い例です。) オブジェクト指向プログラミングとコーディングアーキテクチャ 極めたいサーバーサイド言語を決めたら、その次に基本構文を学ぶことは非常に大切です。しかしプログラマーとしての本当の才能は、きちんとした正しいコーディングが出来るか否かです。コードを再利用する為にも、いかなる言語の場合でも常にオブジェクト指向のプラクティスを使用し、きちんと順番にファイルとコードを管理する様に心がけてください。OOP(オブジェクト指向プログラミング)の背後にあるロジックを説明するようなリソースは、オンライン上でもどこでも無限に存在します。また特定言語を習得する為のチュートリアルも無限に存在します。初めは全く分からなくてめげてしまうかもしれませんが、そんなに難しいことは書いてありません。とにかく通しでチュートリアルをよく読み、沢山練習することです。それがOOPを理解し習得するのに最善で最短の方法です。 Image credit: ppix またプログラミングのアーキテクチャについてもよく学んでください。そうすることにより、コードの一貫性と効率性を維持出来るようになります。コーディングアーキテクチャの一例で、MVC architecture (Model-View-Controller)があります。これは最も一般的でありサポートも充実しています。コードをよくオーガナイズする方法を知っておけば、更新も容易になり、効率的に実行することも可能となります。また、全てのコードにおいて論理的な順序であることは必要不可欠ですが、Webアプリの規模が大きくなればなる程更に重要視するべきです。 データベースデザインの知識 ほぼどんなWebアプリケーションにとっても、データベースは必須であると言えます。そしてもしデータベースを実際使用するならば、構造化する方法も知っておくべきだと思います。新しいプログラミング言語やコーディングの方法論を学ぶのと同様に、優れたデータベースデザインを使用するのにも熟練が必要です。フレッシュなWebディベロッパーはデータベースのデザインなど、アプリケーションの種類に合わせて変幻自在だとお思いになるかもしれません。しかしプログラミング言語やWebアプリケーションのアーキテクチャ自体と同様に、データベースデザインにもルールやコンセプト、ベストプラクティスなどが存在するのです。 Image credit: keepingitfake リレーショナルデータベース設計用のリソースを参照し、素晴らしいデータベース構造を駆動する中核となるコンセプトをしっかりと理解してください。適切に設計されていないデータベースだと、コードがきちんと関連付けられないだけではなく、実際に情報量が増えてきたときにエラーが発生したりWebアプリケーションの動作自体が遅くなったりします。 ここで最初の一歩となるようなリソースを幾つかご紹介しますね。 The Basics of Good Database Design in Web Development Ten Common Database Design Mistakes Relational Database Design AJAXを賢く使う AJAXが浸透し始めて久しいですが、今日ではその機能の良さや流行の波により持てはやされているのではなく、もっと背後にある実用的な目的のために利用されるようになって来ました。AJAXはサーバサイド・スクリプト言語をアシストとして、JavaScriptとサーバーの対話を可能にしました。JavaScriptの内側からサーバーサイド・スクリプトを読込み応答を待ち、ページの更新やリフレッシュすることなくデータベースとの交信を可能とします。 net tuts+ もし今までページを再読込みすることなくログインや登録、プロファイルの更新、データベースからの情報取得やもろもろ出来たという経験がおありなら、それはAJAXのおかげです。AJAXはサーバリソースを節約し、携帯電話のWebサイトでは巨大な利点を持ちますが、それだけではなくユーザーエクスペリエンスをも向上させます。AJAXを利用することにより明らかにベネフィットは増えますが、Webアプリケーションが大きくなればなるほど、その恩恵も大きくなると言えるでしょう。 AJAXに関するリソースを幾つかまとめてみましたので、よろしければどうぞ。 W3Schools AJAX Tutorial Tizag AJAX Tutorial NetTuts+ JavaScript and AJAX サードパーティサービスとの統合 今日のほぼ全てのWebアプリケーションは、FacebookやTwitter、Google、PayPal、Amazonなどのサービスと何らかのつながりがあるのではないでしょうか。これは人気のソーシャルネットワークを経由してサインインし、他のWebアプリケーションのサービスを利用したりとか、個別にそれぞれ自分の情報をセットアップすることなく簡単に他のアクションを実行することを可能としています。 LiVEJOURNAL 上記のような有名なものの他にも、ほぼ全てのWebサービスでAPIが使われています。構文や使用目的に若干の違いはあるかもしれませんが、大きく見れば似たようなプラクティスを使用しています。ディベロッパーならばAPIの使い方を全般的に知っているべきですし、同様にSOAPのコンセプトも知っているべきです。SOAPのコンセプトとはWebサービスを操作する為の、一般的普遍的な方法のことです。非常によく出来たスターターガイドとチュートリアルがあるので、ご紹介しますね。Understanding Web Services Specifications モバイルバージョンの開発 どのようなデバイス上で閲覧されているかという見地から、Webアプリケーションの汎用性の高さは今まで以上に重要視されてきています。全てのアプリケーションにはモバイルバージョンやタブレットバージョンがあるべきですし、様々なスクリーンサイズにも対応可能であるべきです。もし有料アプリなら尚更のことです。これは全てアクセシビリティとユーザーの満足度を高めることにつながってきます。モバイルデバイス上で使い難いなぁと言うイメージを植えつけてしまうと、Webアプリのブランド自体を傷つけることになってしまいます。 Alsa Creations モバイルでのWebアプリの作り方を研究するか、必要あらば誰か他の人を雇用することも頭に入れておいたほうがいいと思いますよ。 よいビジネス、UIデザイン、戦略の基本 もし独自のアプリを作りたいのなら、アプリケーションの作成方法以上のことを知っている必要があります。けれどどのように向上させたら良いのでしょうか。ビジネス戦略をきちんと持ち、Webアプリの設計とレイアウトが出来、Webアプリのマーケティング方法を知っていること、これら全てが繋がってきます。昨今の過飽和市場においてこのようなノウハウを持つことは、プラスの要素というレベルではなくむしろ必須事項です。もし最速で最も効率の良い、素晴らしいコードで書かれたアプリをマーケットに発表したとしたら、あんまり関係のないことかもしれませんが、もしアイデアも稚拙でデザインも乏しくビジネスの観点からも外れていた場合、成功するわけがありません。 Matt Dempsey これはクライアント用にWebアプリを構築する場合も同様です。クライアントには既にアイデアがあるかもしれませんが、Webアプリを作成するにあたりプロとしての専門的な知識を駆使することは我々ディベロッパーとしての責任と言えましょう。クライアントが堅実なビジネスプランを持ちマーケティングの知識も持ったようなインターフェースデザイナーを雇ったとしても、あなた自身もそういう方面に関する知識を所有していれば、プロジェクトの最良の結果を出すためにそういった知識と自身の開発スキルを相乗効果で発揮することが出来るのではないでしょうか。 バージョンコントロール 全てのアプリケーションに対して必要だというわけではございませんが、公の場で使用されるようなアプリを作る場合にはバージョン管理システムにも気を配る必要があります。もし他の人と一緒に仕事をするのならば、アップデートや修正の追跡が出来るようにすることは尚更必要です。Git、SVN、CVSなどWebアプリケーションのバージョンを管理するための無料ツールを含め、オープンソースのバージョン管理システムは沢山世に出回っています。まずは7 Version Control Systems Reviewedなど参考になさってみてはいかがでしょうか。 Git 終わりに 毎日どんどん新しいWebアプリケーションが現れてきて、みなさん独自の素晴らしいアイデアをお持ちのこの世の中ではWeb開発産業のニッチ市場に参加することはWebアプリ開発者として賢い選択だと言えるかと思います。Web開発においてニッチ市場を選択することは非常にチャレンジングでありまた遣り甲斐があり、その為多くの開発者たちがこの道を選ぶのではないでしょうか。 世の中には沢山の学ぶべき技術や身に着けておくべきベストプラクティスがあり、そのリソースの殆どは無料で提供されています。なので本人の心構え次第で、誰でもWebアプリの作成方法を学べることが出来るんですよ。

詳細を読む »

WEB UI/ワイヤーフレーム50のお役立ちツール

今回は絶対に気に入っていただける、便利でしかも無料のWeb UIとワイヤーフレームを50個もご紹介したいと思います。Webデザイナーは、Webサイトであろうとソフトウエアであろうとユーザーインターフェースモデルを生成する為に、常にいくつかの基本的なユーザーインターフェイス用を必要としています。その為に、ユーザーインターフェースを複製するのに便利なワイヤーフレームやUIデザインキットも必要としています。 こちらのアーティクルではプロジェクトのLo-Fiイラストを作成する際に役立つであろう、Web用または携帯用のユーザーインターフェースキットを集めています。このコンパイルが気に入っていただけるとよいのですが・・・。何かご意見ご要望があれば是非お聞かせくださいね。 この記事は、http://www.onextrapixel.com/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 【無料】Web UI+ワイヤーフレームキットまとめ Black UI Kit Alex PatrascuによってデザインされたPSD UIキットで勿論無料です。ファイルは完璧にレイヤー化されており、非常に使い勝手よく出来ています。Webサイトやアプリを作る際に必要な共通要素をうまく押さえています。 Lion UI Kit Lion UI Kitは最新OS Xの編集可能で完璧にレイヤー化されている要素を含んだ、手軽なPSDモックアップツールで、。 Small Blue UI Kit ブルーをポイント色に使ったコンパクトなUIキットで、リミットセレクター、トグル、ボタン、ローディングバーなどを備えています。 Simple To-Do List こちらの無料のPSDダウンロードは、とてもクリーンなデザインで編集も可能なシンプルTO-DOリストです。 Blaubarry UI Kit Blaubarry UI Kitはとても便利なボタン、スライダー、スクロールバーやフォーム要素を含んだUIキットです。シェイプレイヤーのサイズ変更や編集も容易に出来ます。 Minimalistic UI kit the color Google+ Google Plusはお好きですか?そのサービスが?それともインターフェースが?いや、ひょっとしたらそれ以外の何かでしょうか・・・。 Flex 3 Stencil こちらのステンシルセットはFlex3のスタイルガイドからパネル、データグリッド、ボタン、フィールド、リンク、トグル、データピッカー、ツールチップ、エラー、メニュー、スクロール、アコーディオン、タブ、リストなど全てのFlexコンポーネントを含んでいます。 Sleek UI Elements Webサイトを作るにせよ携帯アプリを作るにせよ、よくデザインされたUIエレメントはユーザーエクスペリエンスへの重要なカギとなります。こちらのPSDは近代的で洗練されたスタイルの有用なエレメントが多数含まれています。 GMUI SlixUI Slix UI controlsはWebデザイナーやアプリデザイナーの負担を軽減する為に作られたセットです。全体的にアプリ中心に作られていますが、勿論Web用に使っても支障をきたしません。インターフェースを構築する際に必要な項目の大部分を、きっと解決してくれると思いますよ。 Solid UI Kit こちらのキットはSixbaseのAlvin Thongさんによって作成された斬新なデザインです。ダウンロードにはよく整理され簡単に編集可能なPSDファイルが含まれています。 TRAK オープンソースのTRAK enterprise architecture frameworkを使用することにより生産される、アーキテクチャ記述のViewを有効化する定型のシェイプとコネクターを提供しています。 Simple UI element pack とてもシンプルなキットで、勿論無料です。是非ご利用ください♪ Eclipse GUI Design EclipseとMac OS X用のウィジェットです。 Interactive Sketching Notation 1.1 こちらのInteractive Sketching NotationはOmniGraffle用の最新のステンシルです。手書き風なのが特徴です。 Watchguard こちらは「.gstencil」に変換可能なVisioステンシルで、いくつかのウォッチガード、セキュリティアプライアンス/ファイアウォールオブジェクトが含まれています。 Web Sketch Cursors CSS3に準拠した、Web UXデザインのモックアップ用の手書き風カーソルです。デフォルト、クロスヘア、ポインタ、移動、テキスト、待ち時間、ヘルプ、動作中、不許可、垂直テキストや矢印等を含みます。 Wireframe Magnets こちらの「自分で作ろう♪」型マグネットテンプレートは、Konigi wireframe stencilsを基にしており、ホワイトボードのプロトタイプに適していそうな3枚の要素から成り立ちます。単純にダウンロードしてPDFファイルをマグネットシートに印刷し、切り取ってお使いください。もし水性マーカーなどを使用する場合は必要に応じてラミネート加工を施してください。 iOS Design Stencils for OmniGraffle iOS Design Stencilsは現在Githubで管理されているので、必要に応じてブックマークやリンクを更新してiPhone4用など最新バージョンをチェックしてみてください。 [adrotate block=”3″] Facebook Applications Facebookに関連した膨大なコレクションは、Facebookアプリケーションのワイヤーフレームを作成する際に役立つこと間違いなしです。

詳細を読む »

画期的なCSS3 Gradient ツール

NettutsでおなじみのJeffrey WayやCSS TricksのChris Coyierなどが絶賛し、UIにななり力を入れて作られて、MAC用のAPP、[Gradient App]. まだまだ, Color Stopなどができないですが、今後生き残るツールの一つになるのは、間違いなさそうです。 http://www.gradientapp.com/

詳細を読む »

無料で簡単、しかも便利なオンラインストレージ DropBox を検証

みなさんは、オンラインストレージをご存知ですか? まだまだ、知らない方も多いと思いますが、自分のデーターをストレージサーバー(ファイルとかを保管する容量が巨大なPC)に、自分のパソコンのデーターを保管することによって、バックアップできたり、どこのパソコンからでもアクセスできるなど、色々な用途があってとても便利です。 自分も最近までは、まったく使っていませんでした。主に使うことを控えていた理由として: ファイルを毎回アップロードするのがめんどくさい 一々ダウンロードして作業するのが現実的にありえない インターネットに繋がっていない時にファイルにアクセスできないのが耐えられない 無料で利用できる容量が少ない 最近では、これらのハードルをクリアしてるツールが色々とできて来ました。中でも脚光を浴びているのが、サンフランシスコで活動している、9割のEnginnerがMIT出身のDropBoxである。 仕組みとしては、実際にDropBoxからプログラムをダウンロード&インストールし、ある特定のフォルダを”DropBox” フォルダとして設定する。インストールした、プログラムは”DropBox”のフォルダ内のファイルの更新情報を監視し、更新部分だけをサーバーへUpdateするという仕組みだ。もちろん、サーバー側でファイルが更新されれば、自分のPCのファイルも更新される。 容量も、無料のアカウントで2GB 月々$9 払えば 50GBの大量の容量が使える。 画像や映像を取り扱う方には、50GBでも少ないかもしれないが、一般の個人ビジネスであれば50GBは十分だろう。 だだ、Dropboxとして指定できるフォルダは一つなので、いろんな場所に散らばっている重要なファイルを毎回Dropboxに落とすのは、少しめんどくさい。そこで、AllwaysSyncと合わせて使うことで、既に自分の指定したファイルがバックアップできる状態を作ることができる。 その他にも、DropBoxでは、様々な機能が提供されており、自分がよいと思う機能をリストをまとめるすると: 主なDropboxの機能 無料で2GBまで、$9ドルで50GB使える Sync(同期)を取れるファイルサイズの上限がない Mac,Windows,Linuxに対応している 同期(Sync)は、更新された部分だけである ファイルの変更記録が保存されており、以前のファイルを復元できる Iphoneに対応している 消去したファイルも、一定期日内であれば復元可能 ファイルは暗号化されているので、安心できる 最高3GBまで無料で利用 Dropboxは友達を紹介することにより、最大3GBまで無料で利用できます。早速、250MBのボーナスを貰うには、以下のリンクでサインアップしてください。 https://www.dropbox.com/referrals/NTI0ODcyODg5 Allwyas Sync の有料版 $19.95はここからオーダー http://www.regnow.com/softsell/nph-softsell.cgi?item=8591-2&affiliate=569633&ss_short_order=true

詳細を読む »