» ブログ・webサイト・ランディングページにイラストを活用してみませんか?

AdobeXDとPure.cssでレスポンシブWordPressテーマを作る方法(その1)

投稿日時2019年3月16日 タグ

カテゴリ Webデザイン・コーディング

AdobeXDとPure.cssでレスポンシブWordPressテーマを作る方法(その1)
レスポンシブのWordPressテーマの時短で制作する方法を考えてみました。
使うツールは下記の3つです。

CSSフレームワーク:Pure.css
デザインソフト:AdobeXD
WordPressローカル環境ソフト:local

localについて詳しくは下記サイトが参考になります。
https://coliss.com/articles/blog/wordpress/local-wordpress-development.html

今回はこのWordPressのポートフォリオ兼ブログサイトのリニューアルをしたいので静的HTMLを作成するところまでやりたいと思います。

なぜデザインはAdobeXDを使うのか?

  • UIデザインを俯瞰して見渡せるので全体のデザインを共通化しやすい
  • 操作が単純なのでPhotoshopやIllustratorよりデザインが早く作れて楽
  • ソフトの動作が軽いのでコーディング開発しながらデザイン追加などが楽
  • レスポンシブwebデザインでアートボード作るのが楽

XDなどUIデザインソフトの方がWordPressサイトの画面作成は楽です。

会社でフリーのwebデザイン案件でも私は主にAdobeXDでwebデザイン、LPデザインしてます。

(1)先ずはAdobe XDでコンテンツの内容を作成してデザインします。

私はこのサイトのブログとポートフォリオのテーマを変更する予定なのでブログとポートフォリオの機能を兼ねたサイトカラーはピンクでシンプルなデザインにしました。

カラーやフォントもアセットに登録します。
AdobeXDでデザイン作成、Pure.cssでWordPressテーマを作る方法(その1)

(2)Pure.cssを使ってレスポンシブサイトの雛形を作る

https://purecss.io/

「Get Started」からファイル一式をダウンロードするか、下記のコードをHTMLのheadに設置するだけでPure.cssが使えるようになります。

See the Pen pure.css(1) by Mika (@mikakurimoto) on CodePen.20150

IE対策したい場合はheadの下に更に下記のように記述します。
これでIE11など古いIEブラウザでレスポンシブのグリッドが対応するようになります。

See the Pen Pure.css(2)IE対策 by Mika (@mikakurimoto) on CodePen.20150

更にFlexboxのIE対策したい人はflexibility.jsをダウンロードしてフッターに設置して
Flexboxを使いたい要素に「-js-display: flex;」を記述します。

私は自分で書いたCSSのFlexbox要素に使ってます。
案件で「IEでレイアウト崩れてるよ〜」と報告される事例が多いので
やむ終えずflexibility.jsで対応するようにしています。

Flexboxは確かに便利ですが古いブラウザに対応できてないので
逆にfloatでもいいんじゃないかと思う時もあります。

flexibility.jsについては下記で詳しく載っています。
https://www.webcreatorbox.com/tech/ie8-flexbox

ヘッダーとフッターが完成したら後はXDのデザインカンプ通りにCSSでレイアウトしてコーディングしていくのみです。

トップページと記事ページは下記のようなHTMLとCSSで作成しました。
CSSはSCSS使う方がカラー変更は変数で管理できるので便利です。
最近はこのSCSSを使い回して他のweb案件に使ってます。

See the Pen Pure.css トップページ雛形 by Mika (@mikakurimoto) on CodePen.20150

とりあえず下記のように静的サイトのトップページが完成しました。
AdobeXDでデザイン作成、Pure.cssでWordPressテーマを作る方法(その1)

コードが読める人ならPure.cssは本家サイトを参考にしながら
1時間程度でレイアウトは作れると思います。

メニューはPure.cssのレイアウトのレスポンシブメニューをそのまま使って色を変更しています。
https://purecss.io/layouts/tucked-menu/

Instagramのコードは下記のサイトでウィジェットのコード作成することによって
WordPressやブログにも設置可能になります。
レスポンシブ化されています。

https://snapwidget.com/

(※筆者のメモ書きとして記事を書いていますのでコーディングやコードに関する質問にはお答えできません。
動作については当方で確認しておりますが全ての環境で同じようにできるという保証はしておりません。予めご了承ください。)

スポンサー広告



プロフィール

名前:Mika

会社員webデザイナー(リモート)兼フリーランスのパラレルワーカー。 フリーランスでLP/webデザイン、イラストの仕事を中心に受けてます。

お問い合わせ »