ギャラリーサイトプレゼン

スマートフォン、タブレット対応
ギャラリーサイト制作

アジェンダ
1.目的
1-1目的
1-2 このサイト制作で達成したいこと
2.動作環境等に関する条件
2-1 対応OS/ブラウザ
2-2 レスポンシブ対応
3.サイトデザインについて
3-1 概要
3-2 デザイン
4.まとめ
5.締め
デザインカンプ

1-1 目的
自分の作品のギャラリーサイト
を作る!!
Wye?

1-1 目的
自分の作品のギャラリーサイト
を作る!!
デザインフェスタ(※) 出展中に、
「あなたのWebサイトは無いのですか？」
聞かれることが増えたため。
(※)URL:http://designfesta.com/

1-2 このサイト制作で達成したいこと
①レスポンシブデザインの基礎を押さえる
→デザインフェスタの会場からも見てもらえるようにする為。
②改変しやすい、作りとデザインにする。
→長期運用予定のため、改変しやすいほうが楽。

2.動作環境等に関する条件

2-1.対応OS/ブラウザ
■Windows・Mac
• Safari 今回のメイン対応
• Mozilla Firefox
• Internet Explorer 9.0以上
• Google Chrome

2-2.レスポンシブ対応
0～640px 641～768px 769px以上
それぞれ一般的なサイズで作り、どのように
見えるのかを体感する。

3.サイトデザインについて

3-1.サイトデザイン概要
スマートフォンで見た時に見やすいデザインとは？

スマートフォンで見た時に見やすいデザインとは？
CONTENTS
CONTENTS
CONTENTS
CONTENTS
header
fotter
1Pにコンテンツを
詰め込んだ
縦長のデザイン。

サイト構成
• HOME…トップ画面
• PROFILE…自己紹介
• GARALLY…メインのイラスト展示
• BLOG…制作blogへのリンク
• MAIL…お問い合わせフォーム
• SHOP…委託販売サイトへのリンク

3-2. デザイン
スマートフォン用デザインカンプ
コンテンツ
の
イメージ画
像
コンテンツタイトル
コンテンツ説明文
コンテンツ内容
• 1カラム構成
• ギャラリーは2カラム

3-2. デザイン
タブレット用デザインカンプ
コンテンツ
の
イメージ画
像

3-2. デザイン
PC用デザインカンプ
コンテンツ
の
イメージ画
像

4.まとめ
レスポンシブデザインの基礎を
押さえる
作業中はツールでチェック、最後は実
機で確認することで体感が得られた。

4.まとめ
改変しやすい、作りとデザイン。
シンプルな1ページ構成により、情報が
凝縮された。

締め
タブレットのサイズによっては、今回の設定では
表示が思い通りにいかない部分があった。
より多くの実機でどのように見えるか
試す必要があると感じた。

ご清聴ありがとう
ございました！

Recommended