wordpressでオリジナルテーマを作ってみよう①~SketchでUIデザイン~

もともとこのブログのテーマは0から自分で作ってみようと思っていたので
折角なので、その制作過程を記事にしていこうと思います。

ここではある程度HTML、CSSが書ける
wordpressを若干触ったことがあることを前提条件として進めていきます。

オリジナルテーマ作成の手順

1.サイトイメージを考える
2.コーディング
以上!!
なんとも簡単そうですね。

UIを作る

ではまずはどんなUIにするのか頭に浮かんでいるものを目に見えるものにしていきます。
手段としては、
・紙とペン

・Photoshop
・PowerPoint
・Sketch
など色々あると思うのですが、

本格的なサイト(クライアントがいる場合など)はまず紙とペンで書き出してみて、相手とその場で意見を交わして変更を重ねるのが良いと思うのですが、今回作るものはそんなちゃんとしたものではなく娯楽の一貫となのでそこは省きますね。

紙とペンでサイトを作る時はこちらのサイトが参考になるかと思います。
必要な物は紙とペンだけ!ペーパープロトタイピングのススメ

次に、本当は面倒くさいのでこの工程も飛ばしたいんですが、
何らかのソフトを使ってコードを書かないサイトデザインを作るわけですが
前述したソフトの中でも今回はSketchを使ってみようと思います。
理由は使ったことがないからです。

参照サイト
Sketchが便利らしいことを書いてるサイト
現役WebデザイナーがデザインツールをSketch一択にした理由
大まかな使い方を参考にしたサイト
UIデザインの作成ツール!誰でも分かるSketchの使い方【初心者向け】
エンジニアのための「Sketch入門!」 1時間コース

今回作るサイトのイメージは
・シンプルである
・動きが楽しい
・クールである
・見やすい
・ある程度情報リテラシーのある人向け
って感じで作ってみます。

あ、一番下のは例えばですね
ハンバーガーメニューなんてあるじゃないですか。
ああいうのは、こちらのサイトのように
ハンバーガーメニューはゴミだ!!
ひと目で機能を理解できないのであまり適切なUIじゃないという意見もあるんですが、僕としては現代はインターネット黎明期じゃないんだから、これが一般的になっているように思うんですね。

しかもこのブログ自体がハンバーガーメニュー=メニューてことを知らない人を対象に書いてはいないので、特に問題はないかなと思ったわけです。

それと、今後どこかで見た美しいデザインや心惹かれる動きを見せるサイトを見つけたらパクってこのブログで実験的に使ってみて、自分のものにしてこうと思っているというのもあるのが、一番下の項目を挙げたその理由です。

Sketchを使ってみる

それでは早速使っていきます。
左上のinsert>Artboardを選択します。

画面右にスライドバーが出ました。
ここから今回はResponsive Web Designというのを選びます。

するとデスクトップ、タブレット、スマホ用の型板が出てきました。
また、ctrl + ‘g’でグリッドを挿入することができます。
http://creive.me/archives/6576/

2つ目のデスクトップとタブレットは今回は重視しないので消しときました。
大まかな説明をするとサイトはこんな感じで
ヘッダー、
コンテンツ、
サイドバー、
フッター
の4つの部分に分かれています。
フッターを敢えて分けているのはコンテンツの部分がその時々で長さが変わるからですね。
また、スマホのサイドバーは緑の部分のメニューをタップすることで横からスライドさせて表示させようと思っています。

あと素晴らしいと思ったのがSketchは最新のmacbook proのTouch Barで操作することができるんですね。少し作業が捗ります。

前述した参考サイトを見て作り込んでいきます。
‘R’を押せば長方形を出すことができます。
また’Z’でズーム、command+’Z’で作業を一つ戻る事ができます。
慣れるとなんとかなるものでした。
画像はどこかに落ちていたものです。

トップページのコンテンツ表示、サイドバーのイメージはこんな感じです。
ちなみにピンクのところは記事のサムネイル画像のつもりです。
よく見るとわかると思うのですが、コンテンツ(白い長方形)や「続きを読む」のボタンに2pxほどの影(下と右)を入れています。これを入れるだけでもだいぶ印象が変わりますね。

スマホのコンテンツ部分です。

だいぶ大雑把ですが、イメージを掴むほどには完成しました。

なんとSketchは作ったデザインのCSSをコピペできるみたいです。
Edit>Copy CSS Attributesを選択。
これでもうコピーされている状態です。

そのままエディタなどにペーストします。
あら不思議、ご覧の通りコピペされました。

今回は初Sketchだったので既存の物を使うことに慣れるのと、そもそもそれで精一杯だったのでプラグインを入れる余裕がなかったのですが、今度使う時に色々試してみたいと思います。
Sketchに入れたい、便利なプラグインまとめ

次からは実際に、コーディングの作業に入っていきます。

コメントを残す