絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

6 件中 1 - 6 件表示
カバー画像

デスクトップでもスマホ幅のデザイン!? 見せ方を工夫したWebサイトデザイン事例19選

はじめにスマホに特化したLP(ランディングページ)って、デスクトップ幅で見ると違和感を感じることがありませんか?または、そのようなデザインを作ったというデザイナーの方もいらっしゃるかもしれません。私自身も、ターゲットユーザーがスマホ閲覧が多く、制作スピードが求められる場合、デスクトップ幅の対応をあまり重視しないこともありますが…それでも、何となく物足りなさを感じることがあります。そんな折、ここ最近、スマホ幅にしっかり特化したデザインでありながら、デスクトップ幅でも見栄えの良いWebサイトをちらほら目にするようになりました。そのようなデザインにはどのような工夫がされているのか、改めてまとめてみました!本題に入る前に、少し背景をお話しします。モバイルは幅が狭く、デスクトップは幅が広いため、通常はそれぞれのデバイスに合わせてWebサイトの幅を調整しますよね。しかし、最近はデスクトップで見てもモバイル幅のまま表示させている国内のWebサイトをちょこちょこ見かけるようになりました。今回は、そんなモバイル幅のWebサイトをご紹介します。1. スマホ幅の外側はリッチな固定背景メインコンテンツはスマホ幅のまま、空いた領域を活かして背景固定で、おしゃれなイラストや写真を大きくリッチに見せています。固定にしているので、デスクトップ幅用のデザインを作成する工数も少ないのもいいですね。ほろよい | サントリー餃子の祭|名古屋パルコ RESTAURANTS &FOODHALL美味しい、楽しい、新しい!ペヤングのある日常 | ニコアンド狂ATE the FUTUREキミの感想をふせんに!生声つきブ
0
カバー画像

スマホを意識したホームページ制作

現在、パソコンよりスマートフォンでサイトを閲覧する人が多くなっています。しかし、まだまだスマートフォン対応していないホームページも多々あります。その状態のままだとホームページの検索順位が落ちたり、ユーザーの離脱率に繋がります。スマートフォン対応するメリットと方法をご紹介します。スマートフォン対応すると離脱の原因にスマートフォン対応しないと下記のような状態になってしまい、充実したコンテンツがあっても離脱の原因に繋がります。✓文字や画像が小さく見えにくい✓表示速度が遅い✓リンク等を誤ってタッチしてしまうユーザー層を考えてスマートフォン対応するホームページをどんな人に閲覧して欲しいか考えましょう。例えば新卒採用を強化したい場合は、若い年齢層となります。この層の場合は、パソコンよりスマートフォン利用率が高い為スマートフォン化は必須となります。スマートフォン対応する方法を考えるスマートフォン対応する方法には2つあります。1.パソコンサイトとは別でスマートフォンサイトを作成する方法2.レスポンシブデザインを採用したホームページを作成する方法1は、パソコンサイトと全く別のコンテンツを表示したい場合に採用されます。しかし、更新観点からパソコン、スマートフォン別で更新をする必要がある為、運用には負担がでてきます。2のレスポンシブデザインとはスマートフォン、パソコン、タブレット等どのデバイスで見ても最適なレイアウトで表示されます。どのデバイスにも同コンテンツを見せる場合には最適な作成方法です。運用負担でも軽減されるというメリットがあります。このように、ホームページは運用する観点からも作成方法が変わ
0
カバー画像

レスポンシブデザイン概要

レスポンシブデザインとは、パソコンだけでなく、タブレットやスマートフォンなどでサイトを閲覧しても問題なく閲覧が可能なサイトデザインのことです。この記事は、Google検索セントラルの「レスポンシブ ウェブ デザイン」を参考に作成しています。レスポンシブデザインの定義Googleは、レスポンシブデザインについて次のように言及しています。レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信しつつ、CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。「レスポンシブ ウェブ デザイン」- Google検索セントラルパソコン以外のデバイスからサイトを閲覧しても、見やすいデザインのサイトで、かつ、URLがどのデバイスから確認しても同じサイトのことをレスポンシブデザインが実装されたサイトと定義できます。レスポンシブデザインの特徴レスポンシブデザインの特徴を紹介します。同じURLレスポンシブデザインは、コードの記述よってさまざまなデザインを実現するため、どのデバイスから閲覧しても同じURLになるという特徴を持ちます。複数のデバイスの情報を同じページで管理同じページを複数のデバイスに対応させる構造上、一つのページで複数デバイスのデザインを管理可能です。レスポンシブデザインとSEOGoogleは2016年頃より、スマートフォンのデザインを優先することを明記しています。Google では 2016 年後半から、ランキング、構造化データの解析、スニペットの生成についてサイトのコンテンツのモバイル バージョンを優先的に使用するという
0
カバー画像

ステップ別WEB集客方法|生産性最大化戦略

今回はWEB集客をする上で段階別にどの手段を選択していくのが望ましいか書いていきたいと思います。 「何から始めれば良いのかわからない」 「今の集客方法が良いのか不安」 という方が参考になれば幸いです。 ステップ1 WEB集客をまだ始めていない。 店舗を出して間もない。というステップ。 まずは、認知度を最大化することが第一ステップです。 ⇒業種ごとのポータルサイトに登録が最も成果がでやすい ポータルサイトは費用面が懸念事項になるケースが多い、 一方でポータルサイトのクオリティを自社でイチから制作するのは時間がかかります。 まず、ポータルサイトで認知度を高め、客数を最大化する。 ステップ2 店のコンセプトも固まり、客数が一定数見込みがたつようになってきたステップです。 恐らく従業員も増やしている段階でしょう。 ⇒SNSをポータルサイトと並行して運用し、既存客のファン化を進めます。 また、SNS経由での客数アップも同時に目指します。 とはいえ、SNS運用は継続して更新することがポイントになるので、 運用担当が徹底して更新できる環境を整えることが重要となるでしょう。 ステップ3 客数も増え、従業員も増えているステップです。 内部での仕組みも整ってきたところだと思います。 このステップでは利益が残る体制を構築していきます。 このステップで脱ポータルサイトを目指す。 あるいは自社サイトを使って集客をしていきます。 自社サイトで成果上げていくためには、制作期間と 広告の打ち出し、SEO対策をする期間があるため、事前に集客がある程度できていることが望ましいです。 そこから自社サイトを
0
カバー画像

ELEMENTORでスマホ限定デザインを作る

WordPressのプラグインで、ブロックで編集できると人気のあるELEMENTORを使うと、簡単にスマホのみ表示される要素を設定できます。この画像の中で、レスポンシブデザインの項目を選択すると、デスクトップで隠す、タブレットで隠す、モバイルで隠すの選択ができます。これを切り替えることで、スマホのみ表示できる要素を設置できます。つまり、デスクトップとタブレットを隠すのスイッチをONにして、モバイルをOFFにすれば、スマホのみ表示させることができます。
0
カバー画像

フロントエンジニアの皆さんへ

こんにちは。フレキシブルカンパニーといいます。フロントエンジニアの方はすでにご存じかもしれませんが、codepen、使っていますか?かなり重宝します。一番はトップビューのスライダー等に背景画像が使えること。何故って?PCと、スマホで切り替えられるからです。Webサイト制作に携わる方、ぜひ参考に!
0
6 件中 1 - 6
有料ブログの投稿方法はこちら