Contents

どうも、お世話になっております。昨年末1週間のお休みをいただきまして、お仕事ではなく自分でやりたいことをやる期間というものを作った愛美です。
実はちょっとやりたいなと考えていたことがありまして…

今回はwebサイトの顔でもある「フロントページ」を中心にデザインを変えたので、英語と数字が苦手なデザイナーのわたしどのようにして進めていったのかをご紹介したいと思います。

前準備:ラフ作成

まず実際に制作へ進む前にこんなラフを用意しました。

iPadで手書きラフを起こす

Rough drawing_2

「構成」・「載せたい内容」・「どんな風に見せたいか」をラフに書き出しをしました。だいぶお粗末ではありますが、普段やっているグラフィックでもこのようなラフを書いてからイメージをさらに固めているので、まずは同じ容量でやってみました。

ここから資料や参考書を見つつ、さらにイメージを固めていきます。

デザインの参考資料探し

ラフ作成も然りですが、何かを作る際には資料として参考書やデザインの実例などを探してデザインイメージを固めているので、今回も同じように資料を見ていきます。

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

社会人時代、web案件でカンプ制作を担当していた時に購入したアイデア集です。
この時の案件が初めてwebというものに触れた案件だったので、まずはwebの基礎知識から実例までが見れるものを選びました。配色や印象・レイアウトなどのカテゴリー別にデザインを探すことができ、デザインパーツまで見れるのがオススメポイントです。

WordPressレッスンブック 5.x対応版

退職してしばらくデザインから離れていて、WordPressに触れておらず、久しぶりに使ってみたら、「ブロック」になっていて驚きました…。
完全に浦島太郎状態だったので、これを気に一から勉強しようと購入したのがこちら。こちらの書籍では、WordPress 5.xで導入から開設までをわかりやすく細かく手引きしてくれます。

Webデザインの参考に!ハイレベルなポートフォリオサイト21選

online.dhw.co.jp
画像クリックでサイトへ

イケてるWebデザインで作られたポートフォリオサイト21選まとめ

mynavi-creator.jp
画像クリックでサイトへ

あとはwebサイトの動きを見ることができる実際に公開されているwebサイトを参考にしました。
まとめサイトやブログから見ることで、たくさんのステキなサイトに巡り会えるのでよく活用していますが、今回はポートフォリオサイトの制作ということで、現役デザイナーさんのサイトを中心に参考にしています。

これらを元に「実績やデザインを多く見せることができる」「モーション等の動きを入れて見ていて飽きないwebにしたい」という2点をベースに制作をすることにしました。

デザインはWordPress プラグイン「Elementor Website Builder」

さて、ここまでは普段やっている印刷物の制作過程をベースに見様見真似でイメージを固めていきましたが、ここからは英語と数字が苦手なデザイナーの本領(?)が発揮されます。

自らWordPressを使ってwebに触るようになってから少しずつCSSなどの勉強をし、仕組みなどの理解はできてきましたが、未だにスタイルシートなどを見ると英語や数学の教科書を読んでいるような気持ちになってきます。致命的です。

そこでスタイルシートなどを直接触らずにレイアウトを作ることができるプラグインを活用することにしました。

Elementor Website Builder

Elementor-Website-Builder
画像クリックでサイトへ

今回使用したプラグインは「Elementor(エレメンター)」というWordPressのページビルダーで、ビジュアル的にレイアウトを組むことができるプラグインです。

無料でインストールすることができるプラグインで、WordPressのテーマに依存することなくページデザインを作ることができるのがいいところです。ただし、無料版では一部機能が制限されているので、Elementorの機能をフル活用したい方には有料版のElementor Proをオススメします。

わたしもElementorの機能をたくさん使ってみたいと思ったので有料版のElementor Proを購入しました。

Elementor
左のメニューから好きなアイテムをドラック&ドロップで追加
elementor
アイテムを選択してお好みにカスタマイズ

こちらはElementorの編集画面です。左側にあるのはページ内に置くアイテムで、ドラック&ドロップすることで配置し、レイアウトを作ることができます。またアイテム毎に細かな設定ができるのでより凝ったデザインを制作したり、Elementorにある既存のテンプレートを使うこともできるのがポイントです。

このElementorのお陰でコードを書くことができないわたしでもラフ案をベースにページを作ることができました。

実際にElementorを使って制作したページ

プロントページ

動画が流れているようなイメージのモーションをつけたの大きなスライダーが特徴的なページしました。
実績やブログ記事はカテゴリー別に表示を分け、新着情報もわかるようにしています。

philosophy
固定ページ

固定ページはデザイン制作にあたっての想いを中心にアニメーションをつけて、動きのあるページにしました。
内容をイメージしやすくイラストを使ったり、強調をさせる意図を持ってアニメーションをつけ、提供するサービスがわかるようにグラフ的なものも追加しています。またプロフィール部分はサブ的な位置なので折り畳み式になっています。

最後に​

以上、WordPressプラグインElementorを使ったフロントページ制作のご紹介でした。

WordPressを始めてからやっとwebデザインらしい制作をしましたが、普段行っている印刷物の制作とは全く違うので、キレイにまとまっている印象はありますが、レイアウトが単調でまだまだ改善の余地があると感じたのが正直な感想です。

また今はまだコードなどのわからない部分が多いので、プラグインを活用しましたが、「こうしたいけどできない」というところもあったので、直接コードを書いたり、web基礎知識への勉強が必要だと思いました。

最後に今回下記のサイトを参考にElementorを使ってみました。Elementorのメリット・デメリットについても記載がありますので、使う前にぜひチェックしてみてください。

現在(2021.5)のデザインが異なっていますが、これもElementorを使って作成しています。Elementorでは、自分で組んだアイテムたちをテンプレートとして保存しておくことで、いつでもどのページにも呼び起こすことができます。現在はそのテンプレートを使い、実績紹介などスタイルを少しずつ変化させているので、ぜひご覧ください!

Elementorの使い方:完全ガイド

画像クリックでサイトへ

今後も色々なサイトやトレンドを参考にしていき、勉強の成果を反映させてwebサイトをアップデートしていきますので、またブログで紹介したいと思います。その際はぜひお付き合いくださいませ!