スマホデザインで見やすいサイズ、行間は？デフォルトのアプリ等を調べてみた｜株式会社アクトゼロ｜クリエイティブブログ
こんにちは、デザイナーの小林です。 最近スマホデザインで、アプリデザインや、機能性を持たせたUIのデザインが求められることが多くなってきました。 Photoshopで幅640pxで作成後、実機で確認をするのですが、どうも文字サイズを決めるのに毎回迷ってしまいます。 「小さすぎるんじゃないか？」 「見出しと本文の違いがパッと見で分かるだろうか？」などなど… そこで普段見慣れているだろう、スマホのデフォルトの純正アプリや有名アプリの文字サイズを調べてみました。 検証方法 iPhone4S（古くてスイマセン）でキャプチャーとる Photoshopで上からテキストをトレース。（このときの文字設定の数値を記載しています。） ホーム画面 通話履歴 メール リマインダー メモ帳 ミュージック Google Chrome Facebook Twitter Youtube はてなブックマーク evernot
スマフォ対応の洗練されたUIエレメントがすぐに実装できるCSSとJSの開発キット -Skeleton
Forms -フォーム [ad#ad-2] Skeletonの特徴 スマフォ対応のグリッド Skeltonでは軽量の960pxのグリッドシステムを採用しています。 ブラウザやタブレット、スマートフォンなどスクリーンのサイズが小さくなると、そのサイズに最適なレイアウトに変更します。 Fast to Start 洗練されたベーシックなUIエレメントをあらかじめ用意してあるので、すばやくサイトの制作が始められます。 Style Agnostic SkeltonはUIのフレームワークではありません。最もベーシックなスタイルを提供していますが、あなたの好きなデザインを適用することができる開発キットです。 Skeltonの対応ブラウザ・デバイス Latest Chrome (Mac/PC) Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC) Latest Safari IE9, I
[本]スマートフォン対応サイトの企画・制作はこの一冊から始める -iPhone+Android スマートフォンサイト制作入門
スマートフォン対応サイトって具体的にどういうの？ という人から、既存のサイトをスマートフォン対応サイトにしたい！ 制作環境はどうすればいいの？ という人にぴったりの一冊を紹介します。 jQuery Mobileを使ったUI作成など、実践的な制作方法ももちろんカバーされてますよ。 [ad#ad-2] 本書はオールカラーで、コードもシンタックスハイライトで色分けされて、とても見やすいです。 内容的には数多くの実例をまじえ、iPhone, Android スマートフォンの仕様や特徴、制作環境の準備、スマートフォン特有のコンテンツの設計、デザインの注意点、HTML5/CSS3での実装、jQuery MobileによるUI設計などが分かりやすく解説されており、マークアップやデザイナーの制作スタッフだけでなく、ディレクター、プロデューサーなどにも役立つ内容となっています。 目次を紹介すると、下記のよう
スマホサイト全体のキャプチャを一度で撮って効率化！WebCollectorを使ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。ライターの伊丹松です。最近喉が痛いです。9月10月に風邪を引かない人って逆になんなんでしょうね。 さて、最近では「モバイル・ファースト」などと言われるように、ますますプライオリティが高まっているのがスマホサイト制作。 しかし、PCサイトに比べてどうしても縦長になってしまうため、キャプチャが必要な場面でも一度に全画面を撮ることができません。スクロールして撮った複数の画面写真を後からPhotoshopで繋げて…という作業経験がある方も多いのではないでしょうか。 デザインチェック、デバグ、構成書・指示書への貼付けなど、キャプチャはさまざまな場面で必要になります。ちょっとした作業ですが、ページ数が多いサイトなどでは、トータルでみればけっこうな作業量になります。 そこで今回は、そんなキャプチャ作成作業の手間を解消してくれるアプリを紹介したいと思います。 WebCollectorの紹介 他
デザイナー向け！iPhone6対応について
（追記 140919 11:00)iPhone 6 Plusを入手しました 特に対応してないアプリで遊んでみても画像の劣化は問題にならないレベルです（主観だけど） （追記 140920 15:00)iPhone 6でのアプリUIについて別記事たてました みなのもの落ち着け！ iPhone6/6+の発売がいよいよ明日となりました！ 二年ぶりとなる画面サイズの変更に加えて@3xの台頭などもあるので、 慌てている・不安なデザイナー同志に向けて気をつける情報をまとめてみました。 画面解像度 アイコン・スプラッシュ レイアウト対応について ひとまず気にするのはこの辺りの情報！ あとはおまけで便利そうなリンクも載せました これを読んで、幾分かは晴れやかな気持ちで明日を迎えましょう。 それにしても時代はレスポンシブです。 やれやれだぜ。 基本的な情報 画面解像度はこうなってます 端末 解像度 インチ 書
iPhone, iPad, ブラウザなどクロスデバイス対応のCSSフレームワーク -Less Framework
iPhoneなどのモバイルデバイスには320px、iPadやネットブックには768px、デスクトップなどのブラウザには1280px、三種類のデバイスにあわせてレイアウトを切り替えるフレームワークを紹介します。 Less Framework 2 ベースとなるカラムは下記のようになります。 iPhoneなどのモバイルデバイス 320px、2カラム iPadやネットブック 768px、5カラム デスクトップなどのブラウザ 1280px、8カラム 三種類のレイアウトは同じグリッドを使用しており、カラム幅：120px、溝幅：24pxとなっています。 異なる点はカラムとマージンの量です。 レイアウトの変更にはCSS3のMedia Queriesが使用されています。 body {width: 696px;} @media only screen and (max-width: 767px) { body
ただのWebエンジニアがスマホサイトを開発するにあたって知っておきたいこと - Qiita
今更だけど、スマホサイト開発未経験のエンジニアが、スマホサイトを開発して気づいたことやハマったことなどの雑多なまとめです。 対象はiOS, Androidです。 シェア率(日本) 最近の動向など 2014年4月のスマートフォン販売シェア、日本ではiOSがトップ、欧州ではWindows Phoneのシェアが各国で増加（Kantar調査） | juggly.cn Apple、2014年第1四半期において日本スマートフォン市場のシェアを36.6％獲得！ドコモ版iPhoneで大躍進 | gori.me（ゴリミー） 2013年第4四半期 国内携帯電話出荷台数ベンダー別 シェア 2013年第4四半期および2013年 国内携帯電話・スマートフォン市場規模を発表 より iOS, Android共に半々くらいのシェア率で考えれば良さげ。 Androidシェア(世界) iOSのOSは基本的には最新のバージョン
たった1行！スマホサイトのコーディング時に役立つ小技8（サンプルあり） - Design Color
もくじ 幅をデバイスサイズに合わせる スマホを横にしたときに文字が大きくならないようにする 電話番号に自動的にリンクが付かないようにする リンクを押したら電話をかけられるようにする リンクを押したらGoogleマップアプリを起動させる リンクエリアを広げる paddingやborder分を気にせずwidth/heightの数値を指定する 長い文字列でも途中で改行させる 1.幅をデバイスサイズに合わせる まずはスマホサイトを作るときの基本ですね。サイト幅をデバイスの幅に合わせてあげるには、以下の一行だけで対応出来ます。 <meta name="viewport" content="width=device-width,initial-scale=1.0"> サンプル 2.スマホを横にしたときに文字が大きくならないようにする スマホを横にすると、解像度が変化すると共に文字サイズも大きくなってし
タブレット向けのペーパープロト用ノートをリリースしました ＆ アプリ設計用ピクセル定規プレゼント | fladdict
iPhone版のペーパープロトパッドに続き、リクエストの多かったタブレット版が完成！iPad mini版実寸準拠のA4ノートです。増刷御礼のスマホ版ノートともども、THE GUILDストアから購入可能です。初回ロットは1000部限定生産。 このタブレット用パッド発売を記念して、ご要望の多かったTHE GUILDのピクセル定規（非売品）をプレゼント企画をしようかと。 THE GUILDピクセル定規は、iPhone、iPadのピクセル実寸やミリインチなどが刻印された万能三角スケール。アルミ製にレーザー刻印、100本だけがプロトタイプとして存在する激レア高級グッズ。残り十数本のこの定規を、今回バーンと放出しようかと。 応募方法 応募方法は以下のいづれか4通りから1つを行えばok。複数種を行った場合、当選確率は比例してアップします。 stores.jpから商品を購入する このエントリーをはてぶする
“良いWebサイト”ってどんなサイト？ 良いサイトをつくるために必ず定めるべき3つの要素 | 初代編集長ブログ―安田英久
「良いWebサイトの例を教えてください」「どんなサイトが良いWebサイトなのですか?」……仕事柄、こんなことを、たまに聞かれます。今日は、「良いWebサイトとは何か」「良いWebサイトを作るためには何が必要か」の原則を解説します。 「良いWebサイト」とはどんなサイトのことでしょうか。 キレイなデザインのサイト？情報がたくさん詰まっているサイト？便利なサイト？表示が早いサイト？使っていて楽しいサイト？スマホで見やすいサイト？マーケ寄りの人は、「人がたくさん集まるサイトが良いサイトだ」「コンバージョンが多いサイトが良いサイトだ」と言うかもしれません。 でも、本当にコンバージョンが多ければ、すべて「良いサイト」なのでしょうか。 結論から言うと、「良いサイト」とは、「特定のユーザー層が、特定の状況で、特定のゴールを達成しやすいサイト」だと思っています。 だから、良いサイトを作るために定めておくべ
Webサイトがあるアプリなら必須対応になりそうな、App Linksを使ってみた - Lebe Inc. Blog
2014年4月20日、FacebookがF8カンファレンスでApp Linksというアプリ間連携のための新しい仕組みを発表しました。App Linksではこの仕組みをオープンにし、全ての開発者が利用できることを目標としています。 FacebookアプリからTumblrの記事を開こうとしたらアクションシートに「Tumblrで開く」があります。これがApp Linksで実装できます。 簡単な機能紹介はニュースサイトから引用します。 アプリ開発者は、アプリのコンテンツに数行のコードを追加することでApp Linkメタデータをパブリッシュできる。このコンテンツにリンクするアプリはメタデータを利用してアプリに“deep-link”できるようになる。例えば映画紹介アプリ内に映画のチケット販売アプリへのリンクをApp Linksで入れておけば、ユーザーは映画紹介アプリからチケット販売アプリを直接開いてチ
背景を止められない不自由なインターネット - hitode909の日記
きのうの日記、背景が動いて見てられないっていう感想が大半だった。これは悲しいことで、昔なら、さらっと背景を止めるUserScriptでも書いて、背景止めてから落ち着いて読めてた。 最近は、iPhoneのtwitterクライアント内蔵ブラウザなど、ユーザーが手を入れられないブラウザが増えている。PCのブラウザも手を入れにくくなっていて、Firefoxだと右クリックでGreasemonkey書けたりしていたのが、Google ChromeではUserScript書きにくい。 これは寂しいことで、インターネットは皆の物だから、自分のブログを好きな見た目にするのも、他人のブログを好きな見た目で読むのも、勝手にできていいはずだと思う。俺たちのインターネットを取り戻したい。 photo by dalbera 追記 嫌がらせで背景を動かしたり、背景止めないと読めないと思ってやってるわけではなくて、背景が
Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ
Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定 R
msto.jp - it転職 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
ソシオメディア
ソシオメディアは各種ビジネス向けデジタルプロダクトのデザイン支援を行うデザインコンサルティング会社です。業界をリードする OOUI（オブジェクト指向ユーザーインターフェース）設計、独自ガイドラインをもとにしたエクスパートレビュー、クリエイティブ組織を構築するデザインマネジメント支援など、様々な角度から御社のデザイン戦略をサポートし、デジタルトランスフォーメーションを実現します。 もっと読む 多くの方からご要望をいただいておりました OOUI メソッドの解説書『オブジェクト指向UIデザイン ― 使いやすいソフトウェアの原理』が、2020年6月5日、技術評論社より遂に出版されました。 オブジェクト指向ユーザーインターフェース（OOUI）とは、オブジェクト（もの、名詞）を起点としてUIを設計すること。タスク（やること、動詞）を起点としたUIに比べて劇的に使いやすくなり、開発効率も向上します。 ブ
iPhoneからサイトを作ることに特化したアプリ『Zapd』 | 100SHIKI
もうモバイルからWebサイトをつくる時代かもしれない、と感じさせるサービスのご紹介。 ZapdはiPhoneからサイトを作ることに特化したアプリだ。 PCでサイトを作って、それをモバイルに対応させるサービスはたくさんあるが、Zapdではあくまで「モバイルだけで作る」ことにこだわっている。 モバイルから作るだけあって操作は簡単だ。 まずはテーマを選び、写真をアップし、テキストを追加していくだけだ。そうすればシンプルなTumblrみたいなサイトが出来上がる。あとはそれをお友達に紹介すればいいだろう。 主にモバイルだけしか使っていない、という人も多いだろう。そうした人がサイトを作って楽しむには良いのではないだろうか。
誰でも手軽にお店のホームページを作ることができる「favy」を使ってみました
スマートフォンに代表される情報端末が広まったことで、ランチやディナーの情報をお店の公式サイトを見て確認する、というケースが出てきています。「並み居る競争相手のなかで少しでも多くのお客さんに見つけてもらうためにはネットの活用が不可欠、しかし、そんなノウハウも予算もない……」と悩みを抱えている人にピッタリなサービスが無料で簡単にホームページを作成できる「favy」です。いったいどのぐらい簡単に操作できるのか、架空でオープンしたばかりのダーツバー「G-cafe」のホームページを作って確かめてみることにしました。 favy｜驚くほど簡単にお店のホームページがつくれる https://page.favy.jp/ 実際にfavyを使って作ってみたホームページはこんな感じ。商品の写真や背景画像は手元にあったものを加工しただけですが、これだけきれいにまとまったサイトを作ることができました。 ◆アカウント作
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
ディレイマニア
iPhone 6/6 Plusで仕様が複雑になった解像度もコレなら分かりやすい、歴代iPhoneの解像度をまとめたアルティメットガイド
