alter.js BLOG
レスポンシブWebデザイン、CSSフレームワークなど、Webフロントエンド開発に関するBLOGです。

デザイン

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

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

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

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

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

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

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

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

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

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

Page Top