スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう | b.
webサイトで、ブラウザの高さに合わせてファーストビューを作る場合、CSSでheightを100vhに設定すると、実際にスマホで見た場合、若干下にはみ出てしまう問題を解決します。 PCブラウザのレスポンシブモードなどでチェックしながら作っていく段階では気がつかないやつです。 vhとは CSSのViewportを基準にした単位の１つ。 Viewport Hightの意です。 100vhでブラウザの高さ目一杯なので、1vhはブラウザの高さの1/100です。 vhがあるんだからもちろんvwもあります。 Viewport Widthで、100vwで横幅目一杯になります。 よくある、ブラウザのサイズに合わせてファーストビューをデザインする場合、要素の幅や高さを100vh、100vwにすれば、どんなサイズで閲覧しようとも、縦横目一杯に表示することができるので簡単・便利🙆♀️ <div>Box</d
Androidの父、とんでもない縦長端末を披露！ - すまほん!!
Androidの父ことAndy Rubin氏は、Twitter上にて、見たこともないほど縦長の端末を披露しました。 背面は角度によって宝石にように色を変える光沢素材が採用されています。 GEM Colorshift material pic.twitter.com/QJStoiDleH — Andy Rubin (@Arubin) October 8, 2019 筐体に合わせ、とんでもなく縦長のディスプレイを搭載。UIも最適化されています。縦長に合わせたアプリケーションランチャーと、地図アプリを確認できます。 Andy Rubin氏はGoogle退社後に設立した企業Essential社で、いち早くノッチを採用したEssential Phoneをリリースしていました。最近のXperiaも21:9で攻めていますが、それをも上回るほど縦長ですね。 縦長に合いそうなUIといえば、縦方向にスクロール
スマホアプリの実装が簡単に！実用的なコンポーネントを簡単に利用できるReact Nativeのフレームワーク -Galio | コリス
最近のスマホアプリで使用されているさまざまなコンポーネントをそのまま、カスタマイズして、簡単に利用できるReact Nativeのフレームワークを紹介します。 Photoshop, Sketchのファイルもダウンロードでき、デベロッパーだけでなく、デザイナーにも役立つと思います。 Galioの特徴 スマホアプリを素早く構築 基本の要素、コンポーネントを組み合わせ、スマホアプリを素早く構築。 実用的なデザイン さまざまなプロジェクトに適応する実用的なテーマ。 カスタマイズ コンポーネントベースで実装されているので、カスタマイズも容易。 デザイン用のリソース Photoshop, Sketch用のファイルも用意されています。 ライセンス MITライセンスで、個人でも商用でも無料で利用できます。
無料で簡単にワイヤーフレームやフローチャートを作成できるWebサービス「Whimsical」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上から誰でも効率よくワイヤーフレームやフローチャートを作成できる無料のWebサービスをご紹介します！ 可能な限り短時間で簡単に作成できるように工夫されているのが大きな特徴で、初めての人でも美しいワイヤーフレームを作って公開することが可能です。 【 Whimsical 】 ■「Whimsical」の使い方 それでは、実際に「Whimsical」を使いながらどのようなサービスなのかを見ていきましょう！ まずは、サイトにアクセスして「サインアップ」ボタンをクリックします。 （※Googleアカウントでも登録可能です） 無料のユーザー登録フォームが表示されるので、ユーザー名・メールアドレス・パスワードを入力しましょう！ すると、すぐに自分専用の「マイページ」が表示されます！ この画面から、新規にワイヤーフレームやフローチャートなどを作成
最近のUXデザインにおける、スマホアプリのインターフェイスに使用されているアイデアのまとめ
ここ数年の間に、スマホは単なる電話以上に多くの機能を持つようになりました。スマホはさまざまな目的のために使用され、わたし達の日常のアシスタントをこなしています。 そんな便利なスマホアプリのユーザーインターフェイスに注目し、最近のUXデザインにおけるクリエイティブなすごいコンセプトを紹介します。 15 Creative UX Design Concepts for Everyday Needs by Tubik Studio 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 植物の水やりを管理するアプリ 安眠アプリ ハンバーガーショップのアプリ TODOアプリ 料理のレシピアプリ ベジタリアン用のレシピアプリ アラームアプリ 家電操作アプリ 家計簿アプリ 名刺管理アプリ バランスアプリ ファイナンスアプリ フィットネスアプリ カレン
新しくなったMaterial Designのココに注目！最近のUI要素・コンポーネントのデザインや使い方がしっかり学べる
先日開催されたGoogle I/O 2018で、Material Designは大きくアップデートされました。 ロードマップによると、今回のアップデートを皮切りに、これからも毎月リリースされ、Material Designはその表現力を高める機能を充実していくとのことです。 Material Design Material DesignはGoogleが提供するオープンソースのデザインシステムで、Webサイトやスマホアプリのデザインから実装まで幅広く利用できます。 Google I/O 2018でアナウンスされた大きなポイントは、3点。 Material Themingはテーマを使用して、開発者がプロダクト全体でユニークなスタイルを一貫して体系的に表現できるようになりました。 ワークフローを効率化する3つのツールがリリースされました。 Material Theme Editor, Mater
「AndroidはiOSと同じデザインで！」と言われたときの対応案 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いの
クリエイティブなスマートフォン向けフリーUIキット「H1 / Free Mobile UI Kit for Sketch & Photoshop」
TOP > WebService > クリエイティブなスマートフォン向けフリーUIキット「H1 / Free Mobile UI Kit for Sketch & Photoshop」 日々進化するデザイン。常に最新のものを情報としても、そして素材でも取得しておきたいもの。そんな中今回紹介するのは、最新のトレンドが随所に反映されたフリーUIキット「H1 / Free Mobile UI Kit for Sketch & Photoshop」です。 デュオトーンやフレッシュなカラーリングが特徴の、非常にクリエイティブ性のあるスマートフォン向けのUIキットとなっています。 詳しくは以下 サインアップ、ナビゲーション、チャット、メディア、カメラ、ショップなど、さまざまなテーマに基づいたUIが収録されており、どれも完成されたものばかりなので、すぐに使用することができます。またカラーカスタム
Wordpressテーマ『ELEPHANT2』を2ヵ月間使用した正直な感想
株式会社SNAC代表取締役 MEO/SEO対策/HP制作を用いたWEB集客代行会社を運営。 1985年生まれ 福島県出身 月間12万PVのブログを運営中。自身が運営してきたブログ・メルマガノウハウを基に集客のアドバイスをしている。 【略歴】 ２８歳の頃、会社の突然の倒産をきっかけにインターネットビジネスの世界に入る。その後、ブログ運営やアフィリエイトに関する教材を買いあさり、素人から独学でWordPressの構築、記事の書き方、ライティング、SEO対策、マーケティング、メルマガ集客を学ぶ。2015年8月から始めたブログ「ブログ集客実践の書」は順調に成長し続け、2016年4月→1万PV、2017年7月→2万PV、2018年1月時点→45000PV→2018年7月には月間12万PVを突破。 現在は株式会社SNACを設立し、整体や美容室、パーソナルジム、エステなど実店舗向けのウェブ集客サービスを
モバイルUI進化中！革新的なナビゲーションメニュー実例サンプル10個まとめ
モバイル向けナビゲーションデザインには、さまざまな形やスタイルが登場しています。すべてのナビゲーションメニューが同じ構造であれば、ユーザーにとっても直感的で分かりやすいかもしれませんが、現実はそれほど単純ではありません。 独自の問題を抱えたモバイルアプリは、ナビゲーションメニューのデザインによってそれらの問題を解決することもできます。たとえば、７〜8つほどの主要メニュー項目がある場合はおそらくハンバーガーメニューを採用し、３つほどのメニュー項目の場合はタブバー形式を実装するかもしれません。 デザイナーが製品やユーザーのために最適化したナビゲーションメニュー設計では、クリエイティブで画期的なデザインがいくつか見られます。今回は、ナビゲーションメニューを作成するときに参考にしたい、革新的な実例サンプル例をまとめてご紹介します。 ハンバーガーメニューが進化中！2018年に押さえておきたい最新トレ
スマホで見た時にサイト全体が自動縮小するようにする方法を教えてください。 - ど素人がWordpressでサイトを作らされています。... - Yahoo!知恵袋
スマホで見た時にサイト全体が自動縮小するようにする方法を教えてください。 ど素人がWordpressでサイトを作らされています。 わたしの探し方が悪いのか、縮小させない方法はよく見つかるのですが、 縮小させる方法が見つかりません。 私はスマホを持っておらずスマホ自体の設定や操作のことも よくわからないのですが… 小さいタブレットでヤフーのトップページを見た時のように、 横幅全部が画面に入るようにぎゅーーっと縮小させたいです。 スマホ専用の画面を別に作るのは止められています。 ご存知の方がいたら教えてください。 よろしくお願いします。
รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับมิได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสมา
Viewport と Media Queries に関するメモ | Web Design Leaves
Viewport の指定 スマートフォンの多くは「Viewport」と呼ばれる仮想ウィンドウサイズが設定されていて、設定された Viewport サイズに Web ページを縮小して表示する。 Viewport ブラウザの表示領域のことで、デバイスごとに異なる。（デバイス幅や解像度とは別）「Viewport」にはブラウザの表示領域をピクセル単位（何px X 何px）での値が設定されている。 デバイスの解像度（device-width や device-height） デバイスの解像度は、デバイスピクセル比を持つスマートフォンなどではデバイスピクセル比から求められた解像度の値を指す。これは「デバイスの画面解像度 ÷ デバイスピクセル比」で求められる。 画面解像度が 320px X 480px、デバイスピクセル比「１」の iPhone 3GS では 320px X 480px。 画面解像度が 6
ライバルを出し抜け！スマートフォンサイト制作でコンバージョン率を上げる7つのポイント｜MarTechLab（マーテックラボ）
LPO研究所所長の鎌田です。 今回は「スマートフォンサイトでコンバージョン率を上げるための重要ポイント」をお伝えします。 レスポンシブデザインだの、HTML5だのといった技術的な話は一切しません。あくまで「コンバージョンに直結するスマートフォンサイト制作の考え方、施策」についてお伝えします。 時代はスマートフォンだ、マルチデバイスだと騒がれてはいるものの、実際のところ、Web上でスマートフォンからのコンバージョン獲得を意識して対策できている会社はまだ多くありません。今のうちにしっかりと対策をすれば、PCでは激戦区のジャンルであっても、スマートフォンサイトで出し抜ける可能性は大いにあります。 それでは早速いってみましょう。 目次 スマホユーザビリティは右手親指を意識しろ スマホサイトは読み込み速度を重視しろ リスティングもスマホ向けに最適化しろ スマホサイトではオファーを下げろ スマホではス
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
WebページをRetina対応させるテクニック～基礎知識編
WebページをRetina対応させるテクニック～基礎知識編：jQuery×HTML5×CSS3を真面目に勉強（4）（1/2 ページ） iPhoneのRetinaディスプレイは、Webページの制作フローにも大きな変化をもたらした。WebページをRetina対応させるにはどうすればいいのだろうか。 はじめに 2010年6月に登場したアップルのiPhone 4には「Retinaディスプレイ」と呼ばれる、それまでの常識を覆した高精細なディスプレイが搭載されました。それ以降、スマートフォンやタブレットといったモバイル端末のディスプレイはより解像度の高いものへと進化していき、2013年の初めにはサムスン電子のGALAXY S4やソニーモバイルのXperia Zなど、フルHD画質対応（1920×1080ピクセル）のディスプレイを搭載したスマートフォンが登場するまでになりました。 高精細ディスプレイの登場
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！
Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ 白石 俊平（HTML5 Experts.jp編集長） 人気のCSSフレームワーク「Bootstrap」のバージョン3が正式にリリースされました。この記事では早速Bootstrap3をレビューし、特にグリッドシステムを掘り下げて解説してみます。 フラットデザイン採用、フルレスポンシブ！ Bootstrap2からの変更点のリストは、公式のリリース文を参照してください。特に大きな変更点は以下のとおりです。 フラットデザインの採用 現在流行のフラットデザインを採用しました。ただこれは「流行りに乗った」のではなく、テーマの一つとして提供されているという位置付けのようです。 例えば以下は、Bootstrap3のボタングループです。 レスポンシブWebデザインの全面採用 以前までのBootstrapは、レスポンシブWebデザイン
iida UI Virtual Touch
本コンテンツを体験するためには、最新のFlashPlayer をインストールし、 JavaScriptをONにする必要があります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインの参考になる！最近のスマホアプリで見かけるUI、インタラクションがまとめられたギャラリーのまとめ
各種サービス入会・退会 ｜ Pontaパス（旧名称：auスマートパスプレミアム）