Webデザイン

こんにちは。とみまつです。改めまして、piitreサイトをリニューアルしました。 今回は、リニューアルまでの経緯やデザインプロセスについてお話ししようと思います。 リニューアルの経緯 piitreサイトは2018年の年末に、夫氏が始めたサイトです。当初は WordPress のデフォルトテーマを当て込めただけで、デザインにこだわったサイトとは到底言えず、私自身ブログを書こうにもあまりモチベーションがあがらなかった記憶があります。（夫氏ごめんね。）時間が経つにつれてブログの更新頻度も激減し、piitreサイトは無法地帯になっていきました。 しかし、2019年に私の妊娠が発覚、2020年1月から産休に入るというタイミングで、私自身に心境の変化がありました。それまでは、正直仕事がこなせればいいやと思っていて、積極的に他分野を勉強したりアウトプットしようという気持ちが恥ずかしながら少なかったのですが、いざ、産休だ、1年以上のブランクができるぞ、という現実に直面すると 「自分の市場価値高めないと・・・！」「こんなアプリ作りたい！！（突然アイデア湧いてくる）」「アウトプットしてる人かっこいい！！！私もこうなりたい！！！」「これしたい、あれしたい・・・！！！！」 という気持ちがふつふつと湧いてきました。（人間、追い込まれた方がやる気がでるのは本当にそうだと思います。） さらに、私は普段フロントエンドエンジニアとしてお仕事させてもらっているのですが、「デザイン」というものの実務経験が非常に乏しく、それに対するコンプレックスをよく感じていました。（現職にすごくかっこいいUIを作れる人がいたので余計にだと思います。悔しかっただけ・・・笑） そんなこんなで、じゃあこの piitre をリニューアルしよう（ドメイン代もったいないし）と動き出しました。デザインから実装まで、Webサイト制作における1通りの流れを、改めて1人でやってみようと思いました。 どんなサイトにしたいか？用件をまとめる まずはイメージやどんなコンテンツを発信したいのか洗い出しました。（夫氏の意見も聞きつつ） シンプル、無印っぽい感じメインカラーは寒色系がいいブログ書きたい、アウトプットの場にしたい趣味で描いているイラストも公開したい（ギャラリーっぽいやつ）将来的に何かお仕事につながればいいな、自己紹介ページ作ろうか やりたいことが1通り洗い出せたところで、ワイヤーフレームを描いてみます。 ワイヤーフレームを描いてみる 最初は何かツールでワイヤーフレームを作成しようかと思ったのですが、そんなに大層なサイトではないことと、質よりスピードを重視したかったこともあって、ノートに手書き、というラフスタイルで進めました。実を言うと手書きでワイヤーフレームを描くことすら、今回初めての経験だったので、すでにわくわくしていたのを覚えています。実際に描いたワイヤーフレームはこんな感じです。 特にオリジナル要素もなく、ごくごく普通の個人サイトといった印象です。変にオリジナル感を出すより、よく見るあるあるデザインの方が、いろんな方に馴染んでもらいやすいと思いました。（単にオリジナル性を出せるほどの力量が自分になかっただけでもあります。） この作業自体は1.5時間ぐらいでササッと終わりました。細かいところは次のモックアップの作成で決めていきます。 モックアップの作成 余談ですが、今回作業するにあたりいろいろ調べて、初めて「モックアップ」と「プロトタイプ」の違いを知りました。 モックアップ：アプリケーションの静的マップ。色やフォント、テキスト、画像、ロゴ、その他ワイヤーフレームを形作るものを追加する。この段階でUIを繰り返し塾考する。 プロトタイプ：UXの要素、インタラクション、アニメーション、その他クリックしたときに体験したいと思うことすべてを組み込む。 こちらの記事を参考にしています。 職場で何気なく使っていたワードですが、今思うと正しく使えてない場面があったなと反省しました。。。 モックアップは Adobe XD で作成しました。Sketch、Figma も選択肢にあがりましたが、Sketch は業務で使っていた、Figma より XD の方が動作が軽い（気がする）、しかもお金かからない（無料で使えるの素敵！）という理由で XD にしました。 実際手を動かしてみると、コンテンツ幅や、要素要素の余白、配置、カラーやフォントなど、意識を向けないといけないところがたくさんあって、思っていたより時間がかかりました。WordPress ベースで作るつもりだったので、それも踏まえていろんなサイトを観察しました。 ※ 私がデザインアイデアを出す上でいつも参考にしているサイトを紹介します。 さらに、こちらの Chrome extention がとても便利なので合わせてご紹介させてください！そのサイトが何で作られているのか知ることができます。 いろんなサイトを観察して、実際に私が作成したモックアップがこちらです。 いろんなサイトを観察した割りにこれか・・・という感じが否めませんね（なんだかのっぺりしてる）。1番こだわったのはフォントです。固定ページ、一覧ページの見出しには「Montserrat」というフォントを使用しています。Google Fonts をこんなに眺めたのは初めてというくらい眺めて見つけたお気に入りのフォントです。丸っこくて可愛いので気に入っています。 これを作るのにだいたい5時間程度かかりました。もう少しスピーディーに作れるようになりたいです。1番感じたのはショートカットキーを覚えることの大切さ。これを知っているのと知らないのとじゃ作業スピードに雲泥の差が生じます。あとは、いい感じのマウスほしい。。。トラックパッドじゃなかなかに辛いものがありました。（おすすめマウスあったら教えてください。） 晴れて夫氏からもOKがもらえたので、これをベースに WordPress を触っていきます。その時の話はまた別の記事でご紹介できればと思います。 全体を通して感じたこと デザイナーさんってすごいなあ。。。この一言につきます。実際に手を動かしてみて感じたのは、はじめの1歩が1番難しいということです。アイデアが沸かない、本当に沸かない。ちょっと作ってこれじゃない、ちょっと作ってこれじゃないの繰り返し。普段からどれだけ意識していろんなものを見ているか（Web に限らず）、それが自分の頭の中の引き出しの多さに繋がると感じました。私自身、本当にまっさらなゼロの状態から何かを作ったことがなかったので（前職はデザインチームがいたし、現職はある程度ブランドUIが決まっているのでデザインにそんなに悩まない）、一層この難しさを感じたのだと思います。ワイヤーフレームの段階でイケる！と思っていても、モックアップにするとなんか違うなとか、モックアップの段階で完璧！と思っても、いざ実装するとなんかおかしいな、とかばかりでした。それが楽しかったんですけど！ これを機にWebデザインとはなんぞや、ということがほんの少しわかった気がします。引き出し増やすためにいろんなものを観察しようと思います。 次は実際にWordPress の設定＆カスタマイズについての記事を書こうと思います。どうぞお楽しみに。

Webデザイン

piitreサイトリニューアルについて　①経緯・デザイン

Kento Matsumoto

とみまつ

CATEGORY

ARCHIVE

piitreサイトリニューアルについて ①経緯・デザイン

piitreサイトリニューアルについて　①経緯・デザイン