デザイン効率大幅アップ！Photoshopとスマホの画面がリアルタイムに同期される神アプリ『Skala Preview』
世の中にはこんなに便利なアプリがあったのかと驚きを隠せない霙(@xxmiz0rexx)です。なぜ今まで知らなかったのか！！なんて非効率な日常を送っていたのか！！悔やんでも悔やみきれないです本当に。。 というわけで、今日は存在を知って以来 毎日使ってしまっている超絶神アプリをご紹介させて頂きます:) スマートフォンサイトやアプリデザインに最適なのでマカーなあなたは是非チェックしてみてください！！ 『Skala Preview』とは Photoshopで開いているキャンバスをスマートフォンでリアルタイムプレビュー出来るアプリです！ 今までスマートフォン向けのデザインをする時は、Dropboxにpngを保存し、同期させ、実機で確認していた私。 同期にいちいち時間がかかり かなりストレスだったので、このアプリを知って大歓喜なのでございます♡ 公式サイト：Skala Preview, a Mac a
考察：Appleはスマホサイトを作らない。
今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの本質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう
PCサイトをスマホ対応 CSSテク自己まとめ（１・２回まとめ） - Kaleidoscope
PCサイトをスマホ対応するという記事を１・２回と続けてみて、意外とボリューム満載になってしまったので、 一旦ここまでのCSSテクについてまとめます。 ■第1回 メニュー編 ■記事はこちら ★タグでViewportの設定。メディアクエリによるCSS振り分け。 スマホサイトを作る上で欠かせない準備。 … <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!--viewportの指定--> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" /> <!--/viewportの指定--> <!--メディアクエリでPC用・
スマートフォン向けサイトの作り方 | ユージック
スマートフォン向けサイトの作り方 2011年1月22日 iPhoneとAndroid両方に対応するスマートフォン向けサイトの作り方をまとめてみました。 スマートフォン向けサイト作成にあたっての基本概要 まず最初にスマートフォン向けサイトを作成する際に気になる点は画像の扱いだったりすると思います。 横幅ですが、解像度は機種によって様々ですが、縦向きで320px～640px、横向きで480px～960pxが主流となります。 標準となるものを設けるとなると、320px(横)/480px（縦）を標準として良いかなと思います。 ※iPhone4、4Sは640px/960pxの解像度ですが、内部解像度で320px/480pxと解釈してくれるため。 ですので、クライアントに見せるデザインカンプなどを作成する際も縦を標準とする際は320px（横）で作成すれば問題ないといえますが、iPhone4、4SやAn
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
[Software] Adobe Shadow - モバイル環境でのブラウザ確認補助ツール
[Software] Adobe Shadow – モバイル環境でのブラウザ確認補助ツール Pocket Tweet Adobeが出したAdobe Shadowというツールがなかなかイケてます。簡単に言えばWebサイトをモバイル環境で確認するための補助ツール・デバッグツールというものなんですが、モバイルデバイスを対象にしたサイト制作時にものスゴく役立ちそうです。使うにはまずiPhoneやAndroidなどの確認側に専用のアプリをインストール。次にAdobe ShadowのPC用クライアントアプリをインストール（Mac版とWin版があります）。そして3つめにGoogle Chrome用のエクステンションを追加。 ソフトウェアの準備が出来たら次は設定です。PC用クライアントを立ち上げた状態でChromeから「Sd」ボタンを押下するとパスワードを求められます。このパスはモバイルデバイスでAppを
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
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者でも分かるiPhoneサイト制作で参考になるサイトのまとめ - iPhoneデザインボックス