SYMMETRIC Web開発ブログ
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。
※SYMMETRIC公式BLOGと統合し、ブログ名称を変更しました

デザイン

サイドバー内のコンテンツをスマホに配置するための3つの方法

 PCサイトが2カラムレイアウトの場合、スマホサイトではサイドバーをどの位置に配置すればよいでしょうか?この記事では、レスポンシブでサイドバーをレイアウトするための代表的な3つの配置方法について、HTML・CSSを使った具体的なやり方とメリット・デメリットを含めて解説します。

レスポンシブデザインのレイアウトパターンと実装方法

 こんにちは、レスポンシブデザインに代わる開発手法を提供するJSライブラリ「alter.js」開発チームの田中です。 Webサイトをレスポンシブで制作する際に参考になるレイアウトの考え方や参考サイトをまとめました。 レスポンシブデザインについてあまり知らない方やレスポンシブの実装パターンを増やしたい方 …

ランディングページのデザイン参考まとめサイト4選

 本記事では、スマホ向けのLPの制作を依頼する前に必要なデザイン調査の際に、参考にしたいまとめサイトを、4つ紹介します。 LPの制作を依頼する際に、イメージしているデザインを制作側に共有することで、依頼側と制作側のギャップを少なくすることができるので、制作依頼前のデザイン調査はとても大事です。 スマホ …

スマホサイトで横長のテーブルをどう扱うか

 PCサイトでよくみる横長のテーブルですが、同じ情報をスマホサイトに組込む場合、その限られた表示幅ゆえに見せ方を工夫する必要があります。 (PCサイトによくある横長のテーブル) 今回は弊社が構築したサイトの中から、複雑なテーブルをスマホ用に組み替えた変換例をご紹介します。 テーブルの見出しを固定し、ペ …

スマホ入力フォームを最適化する4つの方法 (後編)

 「スマホ版:入力フォーム改善メソッド(後編)」です。 今回は入力エラーを未然に防ぐ4つのメソッドを解説し、スマホサイトのフォーム離脱を防ぐUI改善施策(EFO)を紹介します。 ▼前回の記事はこちらから スマホ版入力フォーム改善メソッド(前編)〜膨大な項目数と情報量をもつ入力フォーム〜 /archiv …

スマホ入力フォームを最適化する4つの方法

 あなたのサイトの入力フォーム、きちんとスマホ最適化してますか? Webサイトにおいて「いかにフォームからのコンバージョンを獲得するか」は最も重要なミッションです。単にPCサイトのCSSを切り替えて設置しただけでは、スマホに最適化されているとは言えません。操作領域が小さく、使用環境も異なるスマホユーザ …

Page Top