【意外と教わらない】Webデザイナーなら知っておくべき画面サイズのお話。 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのまいまいです🦀 みなさん、駆け出しのWebデザイナーのころってどんなことを学びましたか？ デザインツールの使い方、フォント、レイアウト、配色、コーディング、etc……。 いろんなことを学びますよね。今回は、「めちゃくちゃ大事なのに言葉でサラッと説明するのが難しい」「はじめからきちんと理解しておけば……」と私が感じた画面サイズについて書きます！ 独学でつまずいていませんか？ Webデザインの基本を効率的に学びたい、プロのデザイナーに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 カンバスサイズ PhotoshopもしくはXDやFigmaでデザインをつくると
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
Webデザインのレスポンシブ対応グリッド、基本の使い方徹底ガイド
この記事では、Webレスポンシブデザインにおけるグリッドの使用方法をまとめた基本ガイドです。デスクトップ、タブレット、モバイル向けのグリッドの使い方をそれぞれご紹介します。 レスポンシブグリッドの重要な部分に入る前に、基本的な用語を正しく理解しましょう。 レスポンシブ・グリッドの基本用語まとめ フィールド要素（Field Elements） むらさき色の部分がフィールド要素 フィールド要素は、文字テキスト、イメージ画像、またはその両方を組み合わせたデザインのブロック要素を指します。背景色は、文字テキスト/イメージ画像の背景でない限り、実際にはフィールド要素としては扱いません。 その他にもユニット、要素、親コンテナ（Parent Containers）など別の呼び方もありますが、どれも一緒と考えて構いません。 カラム（Columns） カラム・列は、デザインコンテンツの幅を構成する濃いピンク
レスポンシブWebデザインで、スクリーンサイズが中途半端なときにデザインが崩れないようにするための実装方法
Webページを実装する際、注意すべき点の一つは表示されるスクリーンサイズです。スマホとタブレット、そしてデスクトップの3種類を想定している人も多いと思いますが、現在ではさまざまなサイズのスクリーンが存在しています。 スクリーンサイズが中途半端な「中間のデザイン」で、デザインの見栄えが悪くなったり、崩れたりしないようにするための実装方法を紹介します。横一行配置のアイコンが改行してしまう、画像が横長になってしまう、フォームの入力欄がやたら広くなる、など一般的なデザインで見かけると思います。 Thinking About The In-between Design Cases by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブにおける中間のデザイン 中間のデザインとは 中間のデザインに備えて
AndroidとiOSで100% - 12月タブレットOSシェア
Net Applicationsから2019年12月のタブレットOSのシェアが発表された。2019年12月はAndroidがシェアを増やし、iOSがシェアを減らした。AndroidとiOSの合算値は先月も今月も100%とされており、AndroidとiOSの割合が変化しただけになった。 タブレットデバイス向けオペレーティングシステムとしてのAndroidとiOSのシェアは固定されていない。過去1年間を見ても、それぞれの増加減少の傾向は定期的に反転している。あえていうならば、AndroidのほうがiOSよりもシェアが多いというのがこの1年間の共通点だったと言える。 2019年12月タブレットOSシェア/円グラフ - Net Applications 2019年12月タブレットOSバージョン別シェア/円グラフ - Net Applications 2019年12月タブレットOSシェア/棒グラフ
日本でのスマホのOSシェア、Androidが57.2%、iOSが42.8％に - iPhone Mania
日本の消費者がメインで利用しているスマートフォンのOSシェアは、Androidが57.2％、iOSは42.8％であることがわかりました。 iPhoneのシェアは3.9ポイント減少 MMD研究所は、15歳～69歳の男女9,753人を対象に2019年11月14日～11月18日の期間で「2019年12月 iPhone・Androidシェア調査」を実施、結果をまとめました。 対象者に現在メインで利用しているスマートフォンについて聞いたところ、Androidが57.2％、iPhoneが42.8％でした。 「2018年8月 モバイルデバイスシェア調査」に聴取したスマートフォン利用者のみを再集計した結果、2018年と比較するとAndroidは3.9ポイント増、iPhoneは3.9ポイント減となった、とMMDは報告しています。 Android利用者とiPhone利用者の割合を性年代別にみると、20代～60
スマホ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネント -Cuberto
スマホアプリ用の気持ちいいインタラクションを豊富に備えた、オープンソースのUIコンポーネントを紹介します。タップやスワイプなど、ユーザーの操作に反応するアニメーションは、見ているだけでも楽しめます。 GitHub Open Source Collection ここで紹介するUIコンポーネントは、ロンドンの制作会社「Cuberto」によるもので、MITライセンスで商用のプロジェクトでも無料で利用できます。 Bubble Icon Tab Bar -GitHub 現在位置のアイコンをバブル状にするタブ。 Balloon Picker -GitHub 風船がふわふわ浮かびながら追従するカスタムピッカー。 Fluid Card -GitHub タップすると、アニメーションで拡張するカード。 Liquid Swipe -GitHub 流体のアニメーションでスワイプ。 Rubber Range Pic
スマホ向けのナビゲーションにハンバーガーメニューを使うなら、ソーセージリンクを試してみて
スマホ向けのナビゲーションにハンバーガーメニューが使用されるのを多く見かけると思います。ハンバーガーメニューが必ずしも悪いということではないですが、ハンバーガーのコンセプトを乱用または誤用している場合は、ソーセージリンクが適しているかもしれません。 スマホ向けのナビゲーションデザインについての考察を紹介します。 Using Hamburger Menus? Try Sausage Links by Bradley Taunt ソーセージリンクは先週公開した記事「テキストだけのボタンは、なぜスマホでのユーザビリティを損なうのか」にも通じるものがあります。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューを使うなら、ソーセージリンクを試してみて ハンバーガーメニューとは、長所と短所 ソーセージリンクとは、長所と短
Android 4.4のシェア増加 - 6月タブレットOSシェア
Net Applicationsから2019年6月のタブレットOSのシェアが発表された。2019年6月はAndroidがシェアを増やし、iOSがシェアを減らした。Android をバージョン別に見ると、Android 4.4が最もシェアが多く、以下Android 7.0、Android 5.1、Android 6.0、Android 8.1、Android 4.2が続いている。 AndroidはiOSよりもバージョンの分断化が進む傾向が見られる。タブレットデバイスではさらにその傾向が強く、古いバージョンのAndroidが高いシェアを確保している。特にAndroid 4.4は強いシェアを持っており、現在でもバージョン別で最も高いシェアを確保している。 2019年6月タブレットOSシェア/円グラフ - Net Applications 2019年6月タブレットOSバージョン別シェア/円グラフ
Web制作者が見落としがちな、ハンバーガーメニューをスマホに実装する時の注意すべきポイント
スマホでWebサイトを見ると、Appleをはじめ、DisneyやWikipediaやThe New York Timesなど多くのサイトでハンバーガーメニューが採用されています。Web制作者が見落としがちなハンバーガーメニューをスマホに実装する時の注意すべきポイントを紹介します。 特に、メニューをposition:absolute;で配置している場合は注意が必要です。 The mistake developers make when coding a hamburger menu by Jared Tong 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ハンバーガーメニューをiOS Safariで機能させる ハンバーガーメニューの実装でよく見かける問題 ハンバーガーメニューの実装方法 終わりに ハンバーガーメニューをiOS S
【レスポンシブ】CSSで作るtableデザイン＆コーディング【コードあり】 – 東京のホームページ制作 / WEB制作会社 BRISK
もはやスマホ表示を考えないwebサイトは新規制作やリニューアルではほぼない今日、どんなに横に長いテーブルでもレスポンシブでどうするか考える必要があります。 PCで組むだけなら何も考えずに済むのですが、スマホの縦長の画面で如何にユーザビリティを落とさず横長になりがちなテーブルを表示させることができるか、いくつかtableコーディングのパターンを用意してみました。 demo Contents 縦に積むテーブルレスポンシブ 横並びを縦並びにするテーブルレスポンシブ 疑似要素で見出しを用意するテーブルレスポンシブ content:attr() で見出しを表現するテーブルレスポンシブ spanで見出しを表現するテーブルレスポンシブ スクロールで表示させるテーブルレスポンシブ 縦に積むテーブルレスポンシブ PC SP ごくごく一般的なテーブルパターンですね。 ソース上は上から順番に要素が並んでいるので
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
Principle - Gallery
Principle Gallery Tutorials Documentation Support Download My Account Coupon By Anna Hofmanova Cosmic Discoveries By Alexander Boychenko Activity Log By Sam Thibault Dropbox Carousel Download By Patrick Wong Date Night By Nimasha Perera Android Tabs By Noodle Webshop By Remco Bakker See more on Dribbble Gallery Tutorials Resources Pricing Documentation Support My Account Discourse Forum Updates
Home - App Animations
Hello! Welcome to App Animations, a collection of iOS animations to inspire your next project. You can sort through the 58 animations by their patterns and style, save your favorites after registering, and embed the them on your own site or inspiration board. And be sure to visit this site on your mobile device for looping full screen animations! Ready to learn how to create beautiful UI animation
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スマホやWebページでよく見かけるUIコンポーネントのデザインと実装コードの無料ライブラリ -Eva Design System
GitHub - capptivateco/capptivate: A kinetic pattern library that captured and preserved delightful iOS animations.
UI Movement - The best UI design inspiration, every day
Appealing | Mobile UI Animations
Mobile Design Inspiration
Mobbin - The world’s largest mobile & web app design reference library
