モバイルデザイン1 ／ スマホサイトのベースとなるフレームワークを検討

デザイン ＞ モバイルデザイン

生まれて初めてスマホを購入

　状態:調査中 　閲覧数:2,296 　投稿日:2015-12-17 　更新日:2015-12-21
サイト確認したら、色々凄いことになっていた
・やはりエミュレータとは違うのだな、と感じた

一番問題だと感じた点
・横幅が広いページがある
・物凄く分かりづらい
・操作しづらい

2番目に問題だと感じた点
・メニューが表示されないページがある
・物凄く分かりづらい
・操作しづらい

3番目に問題だと感じた点
・画像へのリンク
・画像だけを表示させると、戻るボタンが端末にしかないので分かりづらい？

モバイルデザイン用語

　閲覧数:483　投稿日:2015-12-17　更新日:2015-12-17

webアプリ


webブラウザへアクセスして利用
・Webブラウザ上で実行されるプログラム
・ダウンロードとインストールする必要がない
・インターネット接続は必須
・ほぼイコールWebサイト

ネイティブアプリ


アプリストアなどからダウンロードし､インストールして使用
・Google Playなどアプリストアで配布

ハイブリッドアプリ


”側”は「ネイティブアプリ」、”中身”は「ウェブ」という代物
・Google Playからダウンロードする体裁はとりつつも、ネイティブコードで記述されているのはボタンなどユーザインターフェイス部分のみで、表示する内容はWebアプリと同じでインターネット上のコンテンツに依存

モバイルデザインテンプレートを探す旅 ／ 今、何が標準なの？

　閲覧数:488　投稿日:2015-12-17　更新日:2015-12-17

Webアプリ


CSSフレームワーク
Bootstrap
・4系
・3系
・2系

JavaScriptフレームワーク
jQuery Mobile
Zepto.js
・jQueryサイト(サイタ管理画面)のZepto移行に挑戦してわかったこと


HTML5ハイブリッドアプリ


JavaScriptフレームワーク
Onsen
・「AngularJS」or「jQuery」ベースのフレームワーク
・AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
Ionic
・AngularJS 使用
・Sassベース

ネイティブアプリ


JavaScriptフレームワーク
React Native
・Reactベースのフレームワーク
・Facebookのオープンソース「React Native for Android」でクロスプラットフォーム開発が簡単になる
Tabris.js
・Tabris.js: JavaScriptでネイティブモバイルアプリを作る

仮結論

　閲覧数:486　投稿日:2015-12-17　更新日:2015-12-18

Webアプリ


CSSフレームワーク
・Bootstrap

デザイン参考
・【スマートフォン向け開発】ユーザビリティチェックリストを作ってみた
・ネイティブアプリのようなWebアプリを作るために
・クオリティの高いスマホサイト/Webアプリまとめ

Webアプリ


Apache Cordova
Monaca
・Visual Studio“だけ”でiOSとAndroidアプリが作れる「Monaca for Visual Studio」

ネイティブアプリ


JAVA
・Android Studio

モバイルデザイン2 ／ スマホサイトにおけるtableタグ使用可否を検討



類似度ページランキング
順位 ページタイトル抜粋 ％
1 モバイルデザイン1 ／ スマホサイトのベースとなるフレームワークを検討 83
2 モバイルデザイン2 ／ スマホサイトにおけるtableタグ使用可否を検討 51
3 モバイルデザイン4 ／ スマホメニュー　 47
4 モバイルデザイン6 ／ フォーム 47
5 モバイルデザイン9 ／ トップページリスト表示 41
6 モバイルデザイン8 ／ スマホはbodyタグに余白なしがデフォ？　 41
7 モバイルデザイン5 ／ スクロールアニメーション 41
8 モバイル フレンドリー テスト ／ viewport設定 38
9 Privateスマートフォンデザインルール 36
10 モバイルデザイン10 ／ aタグ範囲｢切り替え」 34
11 ホーム・トップ・サイト名・ロゴ ／ グローバルナビゲーション 34
12 モバイルデザイン7 ／ スマホ pc 広告 切り替え　bootstrap 34
13 お使いのコンピュータ ネットワークから通常と異なるトラフィックが検出されました 32
14 ディスプレイ比較の重要性／画像が重要な意味を占めるサイトで、何か違うなと感じたら 32
15 CSSキーフレームアニメーションで、マウスアウト時に独自のアニメーションを設定することは出来ない 31
16 レスポンシブスマホサイトで、意図せず横スクロールが発生する場合は、URLを折り返し表示するよう設定 31
17 Chromeをインストール出来ない 31
18 Dreamweaver8で、デフォルトのワークスペースレイアウトを指定するやり方　→　結局、分からず 31
19 プルダウンメニュー（セレクトボックス）要素を右揃えしようと思ったけど、出来なかったのでメモ 30
20 モバイルデザイン3 ／ display: table; 29
2025/2/05 15:54 更新
週間人気ページランキング ／ 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 22
2 16進数カラーコード ／ 2進数 11
3 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 9
4 鉄道会社毎のカラーコード | カラーコード(色) 7
5 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 6
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 5
7 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
7 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 4
7 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 4
8 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
8 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 3
8 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 3
8 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
8 拡張機能が Chrome によって無効にされました ／ この拡張機能は破損している可能性があります。 | Chrome 拡張機能 3
9 キャラクター無料着せ替えジェネレーター Rinmaru Games ／ オンラインサービス | イラスト素材(デザイン) 2
9 Design 0 2
9 RGBの種類 ／ ビットカラー | RGB(色) 2
9 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 2
9 色空間 ／ 表色系 ／ 顕色系 ／ 混色系 2
9 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 2
2025/2/5 1:02 更新