ブックマークしておきたい、スマホUIをコレクションしている海外と日本のサイトのまとめiPhone, Androidなど、スマホのユーザインターフェイスの参考になるギャラリーサイトを海外・国内ともに紹介します。 まずは、スマホでその操作が楽しいアニメーションを伴ったUIギャラリーから。
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ - かちびと.net
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
「効率的なサイト制作のためのDreamweaver活用術seminar」フォローアップ｜DTP Transit
2011年12月11日に開催された「効率的なサイト制作のためのDreamweaver活用術seminar」のフォローアップです。 お預かりしました質問の件は、追記しますので、後でまた覗いてください追記しました。 スライドはCSS Nite in Ginza, Vol.59フォローアップ | CSS Nite公式サイトから（※すべてではありません）。 HTML5やCSS3などのスキルの獲得には下記のセミナーをオススメします。 平日の夜のショートセミナー「CSS Nite back2basic」を2012年1月に開催します #cssnite_b2b | CSS Nite公式サイト ご質問の件 条件コメントを使ったInternet Explorer用の振り分けなど、最近のよく使われているものについて教えて欲しい。 Internet Explorer用の条件分岐次のように記述することで、Inter
iPhoneやAndroid向けのUIパターンギャラリー・Mobile Design Pattern Gallery - かちびと.net
カテゴリがしっかり分けられていて 凄く見やすかったのでご紹介。iPhone やAndroid向けのUIパターンギャラリー です。アプリデベロッパーさんや アプリデザイナー、モバイル向けの デザインの参考にいかがでしょう。 パターンギャラリーはもうすでにいくつもありますけど、ここは特にちゃんと分けてくれているので見やすい印象でした。 左サイドに大まかなカテゴリーがあります。それぞれには更に細かいパターンに分けられています。たとえば、ナビゲーションならリストタイプ、メガメニュー、カルーセル真紀など。 こちらは検索のカテゴリ。検索ボックスや、オートコンプリート、ソート機能付きなどなど。 インビテーション・・・サイトツアーみたいなやつです。こういうのあんまり紹介されてませんよね。 パターンはその場でLightbox風に表示するのでページ推移も必要ありません。 みたいな感じのパターンギャラリーです。
iPhone、Android、WindowsPhone等のPSD素材集:phpspot開発日誌
Roundup Of Fresh And High Quality Smart Phones PSD Files | Free and Useful Online Resources for Designers and Developers iPhone、Android、WindowsPhone等のPSD素材集がまとまっています。 WindowsPhoneの素材はちょっと新しいですね。どんどん機種が出てきて困る気もしますが、スマホがどんどん重要になっていくにつれこうした素材のニーズも上がってきてそうですね。 こうした素材をWEBサイトに使っておくと一目見ただけで、それぞれスマートフォンに対応しているというのが分かるのがいいです。 それにしても開発者としては速くガラケーの対応を終えたいですね。 関連エントリ iOS5とiPhone4SのPSD素材が早速公開
Fireworksで作ったスマホサイトやアプリのモックをiPhoneでキレイに見る4つのTips | Webデザインのタネ
一定期間更新がないため広告を表示しています
秀逸なiPhoneサイト38:phpspot開発日誌
38 Mobile (iPhone) Sites 秀逸なiPhoneサイト38がまとまっております。 日本でも新規リリースの携帯はほとんどスマホということになってきて、もう一年もすればシェアはかなり変わっているのだなというのは誰もが予測が付きそうですが、スマホサイトのデザイン知識は必須の物になりそうですね。 個人的にも徐々に慣れてきましたが、こうしたうまくデザインされているサイトは参考になります。 将来的にはスマホがPCを逆転するなんていう予測もあるぐらいなので、ちゃんとやっておきたいところ。 関連エントリ スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ スマフォでもイケてるクールなドロップダウン実装jQueryプラグイン「DropKick」 コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 スマフォ向けのPHP/
iPhone/Androidアプリのモックアップ作りに便利なPSD・AI・ICON配布サイト｜スマートフォン｜モバイル／スマートフォン｜PHP & JavaScript Room
iPhoneタブバー＆ツールバー用アイコン iPhone UI iPhone外観素材〔iPhone3 / iPhone 4 / iPhone 4S〕 iPhoneアプリケーションアイコン iPhone風のアイコンジェネレーター iPad UI iPad 外観素材〔iPad / iPad2〕 iPod Touch 外観素材 Androidメニュー用アイコン Android UI Android外観素材 Android Widget UI〔ウィジェットテンプレート〕 Droidくん Androidアプリケーションアイコン Androidアイコンジェネレータ〔画像をアップするだけでガイドラインに沿ったアイコンを生成〕 モノトーン系アイコン iPhoneタブバー＆ツールバー用アイコン 2010/9/26 PSD PNG PSD icon Sweets License: 個人・商用利用可 iPhon
Youtubeの動画を背景に
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
How To Enable HTML5 In Chrome | Robots.net
Introduction In the ever-evolving landscape of web browsing, staying abreast of the latest technologies is crucial. HTML5, the fifth and current version of the Hypertext Markup Language, has revolutionized the way we experience the web. With its advanced features and enhanced capabilities, HTML5 has become the cornerstone of modern web development, offering a more seamless and interactive user exp
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
iPhone、PC両方で綺麗に見れるフレキシブルなサイト集:phpspot開発日誌
Available in all sizes: 30 Flexible websites | Awwwards iPhone、PC両方で綺麗に見れるフレキシブルなサイト集。 PCサイトのiPhone対応は今後、当たり前の時代になっていくはずですが、その手間は最小限にしたいところですね。 基本はUA見て、CSSで切り替えて、それでも対応できない部分にはPHP等のサーバサイドを使うっていうのがいいかなと個人的には思っています。 両方で綺麗に見れるサイトが特集されており、今後のウェブサイトづくりに参考にすることができそうです。 関連エントリ iPhoneアプリのプロモサイトを作る際に参考になる６０のサイトデザイン集 奥行きをうまく使ったサイトデザイン集３０ スライダーを上手く使ってデザインされたWEBサイト集３０
スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」:phpspot開発日誌
Socketbug - Mobile Web Application Debugging スマフォ上で動くブラウザベースアプリ開発に役立ちそうなデバッグツール「Socketbug」。 モバイルブラウザで動くことを想定してSafariなどで作っても若干挙動がおかしくなることがあったりします。 Socketbugを使えば、スマートフォンで動いているエラーをそのままキャッチしたり、JSコードを送信してスマフォ上での解釈で動かしたりできます。 出来ることは以下。 ・PC上のブラウザコンソールからJavaScriptを実行するなど各種リモート操作 ・スマフォブラウザに表示されているアプリのソースコードを得てPC上ブラウザに表示 ・スマフォブラウザのエラーをPCのブラウザコンソールに表示する ・スマフォブラウザの現在のHTMLソースをPC側のブラウザでみる（通常はiPhoneブラウザでソースを覗いたり
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ - かちびと.net
なかなか良さ気だったので備忘録。 iPhone、AndroidやiPadなどの人気 のタッチデバイス用に作られたギャラ リー用のJSライブラリ・PhotoSwipe。 人気のプラグイン、jQueryMobileでも 利用することが出来ます。 タッチデバイス専用とあって、独自の操作でもある、ピンチイン/アウト等による拡大や回転、フリックで進むなどの操作が可能です。 PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhon
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
iPhoneやiPadでも綺麗なレイアウトで表示されるWebサイトを制作する為のスターターキット・Skeleton - かちびと.net
なかなかシンプルで良かったので ご紹介。人気のデバイス、iPhone やiPadで閲覧してもレイアウトを綺麗 に保てるように設計されたWebサイト のスターターキット。内容物はHTML、 CSS、JavaScriptです。 シンプルな構成ですが、欲しい部分は用意してくれている、と言った感じのスターターキット。なかなか気に入ったのでデモを作りました。 HTML+CSSのシンプルなフレームワークです。グリッドレイアウトを使った美しいレイアウトで、Media QueryによるiPhone / iPadでのアクセス時のレイアウトも最適化されており、jQueryで作るタブコンテンツのサンプルコードもあります。 デモ作ったので、宜しければお好きなデバイスでアクセスして見てください。 Sampleサイト※別窓 iPhoneでアクセス iPhoneでアクセス。 ランドスケープ iPadでアクセス iPad
[JS]スマホ・デスクトップに対応したインタラクティブなマップが作成できるスクリプト -Leaflet
jQueryなど他のスクリプトに依存せずに、インタラクティブなマップを作成できる軽量のスクリプトを紹介します。 Leaflet - a modern, lightweight JavaScript library for interactive maps デモページ [ad#ad-2] Leafletは、ユーザビリティ、パフォーマンス、サイズ、フレキシビリティを重視して開発されており、デスクトップとモバイルの主要なブラウザでインタラクティブなマップを作成できるBSDライセンスのスクリプトです。 Leafletの主な特徴 タイルレイヤー マーカー、ポリゴン、ポリライン、サークルの設置 ポップアップ イメージのオーバーレイ ドラッグ操作でパン ホイール・ダブルクリックでズーム Shift+ドラッグでバウンディングボックス タッチドラッグでパン（スマホ） マルチタッチでズーム（iOS） ダブルタ
ようやくこのブログ用の スマートフォン用テーマ作りました – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
現在、iPhoneでこのブログにアクセスすると、上記のようなスマートフォン用のテーマで表示されます。 （※4/21 1:30 Androidでもスマートフォンテーマで表示されるようにしました！） 今回、プラグイン（wp-touchなど）や既存のiPhone用のテーマを改良していく方法ではなくて、 今使っているPC用のテーマをベースに、テーマを作る方法にしてみました。 とりあえずカタチにがなったので、これからちょっとずつ見やすいテーマ目指して改良頑張ります☆ （あといろいろコード見直してもうちょいスムーズに表示されるようにします＞＜たぶんいろいろと無駄なことしてるはず。） で、スマートフォン用デザイン。 やらなきゃやらなきゃと思いつつ、 なにを気にして作ったらいいか実はイマイチよくわかっていなかったのです。 スマートフォン用デザインの基本などに関しては、 今回以下のページがとっても参考になり
スマートフォンアプリデザインに役立つ 基礎のまとめ！
スマートフォンアプリデザインに役立つ 基礎のまとめ！：一撃デザインの種明かし（14）（1/4 ページ） 各キャリアが新Android携帯を続々と発表し、スマートフォンへの注目がますます盛り上がる中、アプリケーションも、iPhone／Androidともに展開するものが増えてきました。 そういった中で、本稿ではスマートフォンアプリのデザインのコツをまとめてみます！ iPhone／Androidともに展開しているアプリ3例 まずは、iPhone、Androidともに展開している有名アプリを3つ紹介します。それぞれのスクリーンショットを見ながら違いを探してみてください。 【1】クックパッド レシピの投稿と検索ができるアプリです。PCサイトの雰囲気はそのままに、トップ画面を旬のキーワードと履歴、検索ボックスのみに絞ったシンプルなUIになっています。要素とコンテンツを極力減らすことで、レシピ検索に集中
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
