iPad検証シリーズ「ipadでホームページが制作できるか」の2回目になります。
今回は「サイトマップ」と「デザインカンプ」作成を検証しました。簡単に前回のおさらいからはじめますが、詳細は以下を参照願います。
検証シリーズ/ipadでホームページが制作できるか検証してみた①
この記事の内容
前回のおさらい
前回は検証のための計画を立てました。
- 制作期間は「30時間」(ブログ更新の時間は含まない)
- 検証条件は「アプリがあるものはアプリを利用」
- 作成するページは「TOPページであるHOMEから4つのページを表示」
① HOME
② ABOUT US
③ SCHEDULE
④ ACCESS
⑤ CONTACT
サイトマップ
なぜCanvaを選んだか？
サイトマップはCanveで作成しました。理由は以下の3点です。
- 無償で利用可能
- Adobe系デザインツールに比べて感覚的に操作しやすい
- サイトマップ用のテンプレートがあるので一から作成する手間を省ける
今回の様なサイトマップであれば、無償版でも問題ないと思います。ちなみに有償版との大きな違いはテンプレートの数です。
サイトマップを作成
サイトマップとは？
サイトマップとは、必要なページを書き出し、ページ同士のつながりや重要度などの構成を図にまとめたものです。
Canvaでの操作は5ステップになります。
操作は5ステップ/Canva
① Canvaにアクセス
② デザインを作成で「サイトマップ」を選択
③ デザインテンプレートを選択
④ サイトマップを作成
⑤ ファイルの書き出し
最終的にこのような感じに仕上がりました。
デザインカンプ
なぜAffinity Designerを選んだか？
なぜCanveを選択したかは以下の3つが理由になります。
- 費用・操作感を考慮するとAdobeXD（無償）がオススメですが、アプリ版が無い
- 操作感がAdobe系デザインツールの仕様に近い
- 費用面で有償ですが、Adobe系デザインツールと比較すると安値でかつ買い切り
デザインカンプを作成
デザインカンプとは？
デザインカンプとはグラフィックツールを使用して実際にWebページとして表示されるものと変わらないデザインのことです。
操作は3ステップ/Affinity Designer
① Affinity Designerにアクセス
② デザインカンプを作成
③ ファイルの書き出し
デザインカンプ完成
最終的にこのような感じに仕上がりました。
感じたこと/Affinity Designer
Affinity Designerのアプリでデザインカンプを作成することはできましたが、気になることが2点あったので、ご参考まで。
- 日本語入力はバグることがある
「デザイン」とローマ字入力すると「えザイン」と表示されました。英語表記のデザインになった理由でもあります。 - アートボードがたまに消える
原因は不明ですが、アートボードが突然消える現象が発生し、都度ナビゲーターを使って位置やサイズを設定する必要がある。
まとめ
今回は「サイトマップ」「デザインカンプ」の制作を紹介しました。Affinity Designerはちょっと問題ありましたが、何とか制作はできました。ちなみに所要時間は計8時間です。
[所用時間]
- サイト計画：2時間 ← 前回作業
- サイトマップ作成：1時間 ← 今回作業
- デザインカンプ作成：5時間 ← 今回作業
合計：8時間（残り22時間）
次回はいよいよ「サイトの作成」です!はたして時間内に完成するでしょうか？
コメント