2013年、チェックしておきたいUIデザインをdribbbleから紹介します。 高解像度の.psdや.pngファイルをダウンロードできたり、動きをアニメーションgifで楽しめたりします。 2013年のデザインを振り返りつつ、来年はまたどんな素敵なデザインが生まれるのか楽しみですね。
A Handy Collection Of iPhone 5s PSD Templates Following on from 10 Alternative iOS 7 Design Concepts, I wanted to share with you a handy collection if iPhone 5s templates. The iPhone 5s mockups are mostly in PSD format, there are also crisp vector formats and some have thrown in the iPhone 5c template also. These iPhone 5s PSD templates are super handy for creating app mockups, responsive web mock
Mac OS XとiPhoneのアドホック接続 このページではMac OS XがインストールされたコンピュータとiPhoneをルータなどを介さずに直接Wi-Fiで接続する方法を説明しています。 ※当ページはSnow Leopardで検証しておりますので、お使いのOSのバージョンによっては異なる表記や方法になる可能性もございます。ご了承ください。 ※アドホック接続につきましてはOS固有の設定ですので、SkyLightへのお問い合わせはご遠慮くださますようよろしくお願いいたします。 "システム環境設定"の共有の項目を表示させてください。 共有する接続経路を"Ethernet"にします。 相手のコンピュータが使用するポートを"AirMac"にします。 インターネット共有のチェック欄にチェックを入れます。 インターネット共有のチェック欄にチェックを入れると下記ダイヤログが表示されるので"開始"をク
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
前にも一度、同じような問題に直面して調べて解決したような気がしたのですが、今回もおそらくその時と同じくGoogleで調べて解決したので、メモって忘れないようにしておこう。 font size自動調整をきる 最近ではレスポンシブデザインでいろんなデバイスに対応したりしますが、私もそんな感じの仕事をしていたわけです。最初はPC Chromeでwindowを伸び縮みさせながら作っていたわけですが、ある程度できた所でiPhone Mobile Safariでチェックしていたのです。Portrait mode(縦向き)では問題なく閲覧していたのですが、Landscape mode(横向き)にしたときにどうも文字サイズが変になります。 最近はiPhoneもリモートでWeb inspectorで見れたりしますから、細かく調べてみても数値的には問題無さそう。おかしいなってことで調べた後に、iPhoneでは
【画像】iPhoneのホーム、ロック画面用の壁紙ください! Tweet 1:以下、名無しにかわりましてVIPがお送りします:2012/11/11(日) 18:51:56.01 ID:vJhE8aIi0 おねがいします! 2:以下、名無しにかわりましてVIPがお送りします:2012/11/11(日) 18:54:12.21 ID:yl63TTGJ0 3:以下、名無しにかわりましてVIPがお送りします:2012/11/11(日) 18:55:02.28 ID:vJhE8aIi0 ちなみに今のはこれです! 【ホーム画面】 【ロック画面】 気持ち悪くてすみません! 7:以下、名無しにかわりましてVIPがお送りします:2012/11/11(日) 18:56:54.45 ID:Zppq17s60 >>3 壁紙ください! 13:以下、名無しにかわりましてVIPがお送りします:2012/11/11(日)
PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhoneとiPadでのキャプチャです。 iPhoneでのキャプチャです デフォルト サムネを幅に自動で合わせてくれます。 ランドスケープ ランドスケープ時でもサムネイルを自動で拡大し、幅を合わせてくれます。 画像の閲覧 単体表示はサムネイルをタップします。左右フリックで進んだり戻ったり。 ナビゲーションもある 単体、ランドスケープ。タップすると下部にナビゲーションバーが
What’s new in v5Code quality and rewrite in ES6The script is now distributed as an ES module and does not require a build step to use. The documentation is also updated and now includes more examples. Simpler initialization and dynamic import supportPhotoSwipe now supports dynamic import and does not block page rendering. <script type="module"> import Lightbox from './photoswipe-lightbox.esm.js';
ファーストビューで遷移することなく商品検索 サイトの訪問した最初の画面の初めに見える範囲(ファーストビュー)で、商品の絞込みを行うことができます。 しかも画面を遷移することなく、詳細の並べ替え(価格順や人気順など)を行えるので、ある程度欲しい商品が決まっている場合はそのまま商品詳細画面まで一気に進むことも可能です。 カートボタンタップでそのままカートへ 商品一覧画面のカートボタンをタップすることでそのまま商品をカートに入れることができます。(もちろん商品詳細画面へ移動することも可) さらにポップアップで ・購入情報入力 ・後で入力(買い物を続ける) ・カートの中を見る と選択することも可能です。 カテゴリごとのお勧めも遷移なしで切り替え カテゴリごとのお勧め表示も、上部のメニューをタップすることで画面を切り替えることなく表示をさせることができています。 Facebookアカウントで会員登録
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px~640px、横向きで480px~960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px(縦)を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px(横)で作成すれば問題ないといえますが、iPhone4、4SやAn
基本のHTMLを作成する 最低限の制作環境が整ったところで、さっそく簡単なスマートフォン向けWebページを作成してみましょう。エディターを起動して、次のようなHTMLを用意します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>スマートフォンサイトテスト</title> </head> <body> </body> </html> 今回はHTML5で記述していますが、基本的にはHTML4やXHTMLなど、PC向けのHTML/XHTMLがほぼ利用できます(iモードなど携帯サイト用のHTMLは正しく表示できません)。続いて、基本的なマークアップを施していきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ(サイズ) HTMLに設置したコンテンツのサイズ ドキュメント(サイズ) 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
Of all the iOS GUI Photoshop documents we’ve created over the past 4 or 5 years the one for the iPhone is by far the most popular. We take these things pretty seriously because we use them on a daily basis ourselves. This version, iOS 6 for iPhone 5, is a bit different than previous versions. Those of you who have downloaded and used these files have probably noticed they’ve become quite bloated.
こんにちは、りうこです。 今日から11月ですね! といっても今日も20℃オーバーで暖かいので、寒いのが苦手な私はこのくらいの気温が続いてくれればいいのに。。と思っています。 では、早速ですがスマートフォンをデザインする際に気をつけたいことをご紹介します。 横向きで見ることを想定したデザイン これはコーディングの際にも気をつけなければならないのですが、 固定幅でデザインすると、横向きにしたときに下の画像のように余白ができてしまいます。 リキッド(可変幅)を想定してデザインするのが基本です。 フォントサイズは12px以上 文字が読みづらくなるということもありますが、 iOSのSafariでは、文字サイズが11px、10px、9pxのときは 折り返し地点の右側に余白ができるというバグがあるようです。 【参考】iOSのSafariで特定のfont-sizeのときの謎の隙間 http://webte
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く