dorayakiBlog

~興味ある事について書いてます~

スマートフォン等のサイトデザイン

Webギャラリーのサイトをスマートフォン対応させてみました。
今後のデバイスの変化なども読みながら、流動的に対応したいと思います。

そのときWebサイトをスマートフォン対応させる場合、その方法はいくつかあり、

サイトをPC・タブレット・スマートフォン用の複数のサイトのHTMLに分散するのではなく、全てを兼ねる一つのサイトのHTMLに統合し、対応するCSS内でメディアクエリによるデバイス毎の画面サイズでの切り替えが最も良いかと考える。
SEO的にもHTMLとURLの分散も防げ、修正も一種類のHTMLだけで済む。

難点が一つあり、あらゆるデバイスに対応させるにはそれぞれのブラウザやデバイスの違い等をひとつひとつ考慮に入れながら、サイト作りを考える必要がある事だ。
条件次第では、修正の手間や複数設計などのコストはあるが、デバイス毎のCSSを用意し切り替える、もしくはそれぞれのHTMLとCSSつまりそれぞれのサイトを用意したほうが楽かもしれない状況もある。
とはいえ、デバイスの種類が増えこそすれ減りそうにもないので、ページが増えた場合の更新や修正量やそこでの間違いを防ぐ事を考えると、一種類のソースで作るほうが後々良いと考える。人手が充分にあるならそうでもないかもしれないものの。
それでも全ての対応が無理な場合はある程度の見切りを考慮する必要もある。

メディアクエリによる切り替えに加えて、 javascript を使いユーザーエージェントからデバイスを判断して画像のサイズを切り替えたり、CSSのセレクタやプロパティを切り替えるのも有効である。

近年スマートフォンやタブレットからの利用が増えているので、WebサイトをPC・タブレットで共通のものとして統合し、それをスマートフォン用にもレスポンシブする様に最適化するのが、現段階では効率的と考える。

そのとき、シンプルな構成のデザインにするならば画面サイズによってだけ変化していくシンプルなレスポンシブデザインで良いかもしれないが、文字や画像の並びや大きさはもちろん、各デバイス毎にそのデザインの配置構成の意味合いは変わる。特にスマートフォンでは面積の大きさや縦横の比率や使われ方や使われる場や操作方法がパソコンやタブレットとは大きく異なるので、パソコンやタブレットの縮小版ではなく最適化が必要なのだと考える。全く違うデザイン過ぎてもサイト自体のアイデンティティを損なう事も考慮すると。

スマートフォンサイトは携帯電話用のサイト(以下携帯サイト)のようにならないデザイン設計が必要である。
(なっても悪くはないがユーザー側の受け取るユーザー体験を考慮するならば避けたほうが賢明)
狭い面積なので文字を重視しがちになるとかつての携帯サイトのようになってしまう。テキスト本文やリンクなどの伝えるべき文字は別として、ボタンやその他の操作に関わる部分などにおいて、余白と図形などのフォルムと配色と画像を組み合わせて、せまい面積の中にあっても余裕のある構成をビジュアルをもって前面に押し出しつつ作るほうが良い。見た目はもちろんだが、認識性・識字性などの機能性も考慮しつつ。
その点では携帯サイトも同じではあるが、スマートフォンではより高度な表現が可能なので、そのようなデザインが容易になる。
ブログやニュースのサイトなどの文字が中心のサイトでも考え方は同じだと考える。

とはいえ、できるだけ、例えば世の中のWebがタブレットとスマートフォンに、もしくはパソコンだけに統一されてくれるとありがたいのだけど、
テレビや家電などに広がりそうな勢いと未知なる期待を含む可能性を考えるとそれは無理な願いかと思うので、こちらでできるだけ統一していくのが良策であると考える。

できるだけカンタンに。
より機能的に、そして格好良く。

カテゴリ別記事一覧

・絵画技法
ポワンティエという絵画技法
ポワンティエの仕組みについて
アラプリマ技法のコツ
スカンブル技法
グレーズ(グレージング)技法
スフマート技法
グリザイユ画法
インプリマトゥーラ
ファットオーバーリーン
ウェットインウェット
スパッタリング
絵の耐用年数
絵の耐久力
絵や印刷物の保存方法
絵具のつや消し
つや消しの絵具
つや消しの原理
つや消しの絵が好まれる理由
絵を描く姿勢
絵の描き方とは
黒い物体の描き方
補色対比を利用した描き方
透視図法とは
点描について
彩色について
陰影のつき方

・水彩、アクリル絵具、他
アクリル絵具の特徴
アクリル絵具の道具
アクリル絵具を使う時に気をつけたい事
アクリル絵具の弱点
アクリル絵具を落とす方法
アクリル画に必要な道具
アクリルニスの塗り方
水彩画の絵やイラストをうまく描くコツ・方法
アルキド樹脂絵具について

・油彩
油絵を描く道具
乾燥促進剤の種類
樹脂ワニスの種類
乾性油の種類
画用液の調合の方法
揮発性油の種類
油絵を描く時の臭い
シルバーホワイトという絵具
シルバーホワイトとチタニウムホワイトを混ぜる
混色制限の無いウルトラマリンブルー
油絵具で紙に描く方法
油絵用の画用紙
紙に油絵具で描く
油絵専用画用紙アルシュオイルパッドについて
油絵の具でイラストを描く
油絵具を速く乾燥させるには
油絵の臭いを減らして描く
油彩筆の洗い方
グレーズの画用液について
スタンドオイルやベネチアテレピンについて
ブラックオイル(クサカベ)のレビュー
ストロングメディウム
高品位油絵具ヴェルネ 使用感
樹脂油絵具について

・画家
フェルメールブルー
印象派モネの技法
印象派ルノワールの技法
ハマスホイについて
「バルテュス 猫とアトリエ」を読んで
続「バルテュス 猫とアトリエ」を読んで - 技法面で気になった部分について -

・美術
画家は長生きなのか?
絵はお金のかからない趣味なのか?
画家の映画
5分で分かるざっくり西洋美術史
鉛筆の硬度Fとデッサンなどでの用途
下手も絵のうち について
心が哭くという事 芸術創作の動機
絵を描くときの眼の使い方
仕事しながらの創作について
美術館でのマナーについて
よく行く画材屋について
百均の絵具
チタニウムホワイトの特徴
ビスマスイエローの特徴
紙パレットの利点
空はなぜ青い
天然の軟毛筆について
筆の置きどころ
アートは必要ないか
アート(芸術)とは何なのか?を考える
美術の授業は必要なのか
コロナ禍の美術鑑賞
絵の飾り方
絵の行き着く場所
アナログ画材・アナログ絵具の良い点
デジタル画材の良い点

・ウェブ・IT
NTTドコモの新料金プランのahamo(アハモ)にしない理由
スマホアプリのデジタルデトックス
Twitterでサムネイル画像を真ん中に調整する方法
レスポンシブウェブサイトの作り方
スマホはサブブランドに脱出せよ
スマホゲーム(ソシャゲ)は高過ぎる
UQモバイルへの移行費用
simロック解除の方法
mnp(ナンバーポータビリティ)の方法
スマホ・携帯ショップでタブレット契約した時の何か騙され感のある話
スマホの料金が高いのでauからUQモバイルに変えた
買い切りアプリゲームについて
スマホ依存症・中毒にならない為に
photoshop for ipad を試してみた
マイナーなジャンルなブログの描き進め方
自分のサイトの表示速度を測る方法
i pad 電源がつかない時の対処法
パソコン配布27万円について
スマホ用VRゴーグル(簡易版)を買ってみた
ながらスマホについて
iphoneのメモ帳の活用
一般人はプログラミングを学習する必要があるのか?
人はAIに仕事を奪われるのか
Amazon web servide EC2 に FTP で接続できなくなってしまったので
リファラーのアクセスを制限する
Googleへのクローラ巡回のリクエストとその拒否
Google Earth Pro を試す
Google Earth Pro を試す 追補
プログラミングをはじめたきっかけ
プログラミング言語は何から始めるかについて
一般の人が最初に実用として、どのプログラミング言語を学んだほうが良いのか
Webデザインで風流な縦書きを
iPhoneの使いみち 私の場合
Java servlet をAWS Amazon EC2 にアップロードする流れ
スキューアモーフィズムとフラットデザイン
スマートフォン等のサイトデザイン

・生活
フリーランスは国民年金基金に加入した方が良い
クレジットカードで家計簿
温かい飲み物を買わない
しみ込みチョコパフについて
依存症の原因とは
生きる意味とは?について
ペットボトルは買うな
突然の訪問は少し怖い
風邪をひかない方法
サンシェードの日除けの効果
なぜ人は隅に座るか(電車や席など)
一人遊びの才能
あいさつする意味
好きな事を仕事にしたほうがいいと思う理由
クリエイターと消費税
楽に掃除する方法
持たない手ぶら生活
イノベーションはどこにある
伝記を読む意義

Name:ドラ焼き
油絵具でイラストを描いてます。webプログラミングもやってます。 このブログでは絵や興味ある事について書いてます。Twitterにてイラストもアップしてます。アカウント:@dorayakiArt
webギャラリー:dorayakiArt Gallery
👇このページの記事をシェアできます