先月のいなフリにて。
サイト制作の講師を務めるともき氏からのご教示の元、初めてワイヤーフレームなるものを作ってみた。
利用したツールは「Adobe Xd」
無料である。
そのワイヤーフレームを元に、個人的にお気に入りの画像を使って疑似サイトをデザインしてみた。
正直めちゃくちゃ楽しかった。
無料でここまで簡単にデザインできる、動くものが作れるのはすごい。
今回は改めてワイヤーフレームとは何か、作ったデザインも載せつつ振り返ろうと思う。
ワイヤーフレームとは？
簡単に説明するとウェブページの設計書である。
ワイヤーフレームを元に、実際サイトをデザイン・制作していくということを学んだ。
ためになるサイトがあったので以下にリンクを張らせていただく。
「ワイヤーフレームとは」で画像検索するとこんな感じ↓
文字と図形でできている。色味は少ない。
今回模写したワイヤーフレーム
使用ツール：Adobe Xd
図形配置の際、ガイドライン（センターマークなど）などの配置補助機能が多く出るので、作業効率駄々上がりである。
私は、ワイヤーフレームを元に自分好みのサイトをデザインすることがめちゃくちゃ楽しかった。
分業の余地を感じた瞬間である。
ワイヤーフレームは設計書を書くのが得意な人に任せて、自分はデザインから入るのもありだなと思った。
実際クラウドワークスなどのクラウドソーシング上では、ワイヤーフレームを元にデザイン作成をお願いする仕事も散見される。
ワイヤーフレームを元に作った疑似サイト
実際ヘッダー固定などをして遊んだリンクはこちら↓
ここでまたXdのいいところを述べておきたい。
- Adobe Xdダウンロードしてない人でもリンクからXdの成果物見れる
- 他のAdobe製品（フォトショとかプレミアとか）より使いやすい＝要素が絞られてて作品制作しやすい
- 無料(だいたいAdobe製品は有料なのに)
自身の用途に合わせて使い分けていきたいところ。
コメント