前回はデモサイトが動くところまでを手順にしましたが細かく動作の設定などが出来るのでそれを見てみましょう。
General Settings（一般設定）
まずはMinimable Optionsを選択してテーマの一般設定から見てみましょう。
設定が終わったらきちんと保存します。
Header Settings（ヘッダー部分の設定）
次はヘッダー部分の設定です。
きちんと保存します。
Footer Settings（フッター部分の設定）
最後はフッター部分の設定を見ます。
保存を忘れずに。
Sponsored Link
Minimableを初期状態から設定するポイント！
今回のテーマの設定方法は一旦デモサイトと同じ構成にしてからそれをカスタマイズするって方法でしたが、そうじゃなく初期状態から作り上げていく方がいいって方もいると思いますのでその方法を紹介します。
「Minimableのインストールが終わったら」までさかのぼって説明します。インストールが終わったら最初に固定ページ > 新規追加で新しく固定ページを作ります。
この時テンプレートをMain Templateに設定しておきます。これでMinimableのデザインを読み込む準備ができました。これがないと動きません。
きちんと保存しましょう。
サイトのトップを作成
次にサイトのトップを作ります。
固定ページ > 新規追加で新しいページを作成してテンプレートをTemplate Homeに設定します。
すると画面が切り替わりますのでここで設定をしていきます。
そして一番大事なのがパーマリンクの設定でHomeはpage-1に設定します。
Minimableはpage-1,page-2,page-3と順に読み込む設定になっているのでこれを間違えるとページは出てきません。なので必ず設定しましょう。
作りたいページが出来たら設定から表示設定を選択して、固定ページにチェックを入れます。
そして最初に作った固定ページ（テンプレートをMain Templateに設定したページ）をフロントページの選択から選んで変更します。（ここではMain Pageというタイトルを設定したのでそれを選択）
最後にきちんと保存してサイトを確認してみましょう。
これで問題なくMinimableのテンプレートでサイトを構築する事ができるはずです。
参考になれば幸いですが間違いなどあれば指摘していただけると今後の参考になりますので、何卒宜しくお願いします。
もちろんわからない所があればコメント欄にてメッセージお願いします。力になる事ができるかもしれませんので。
Sponsored Link
このテーマを使おうとするとしっかりとした手順を踏まないと使えないので、そこで詰まる人も多いのでは？と思い物凄い簡単な方法を先に紹介します。
プラグインのインストール・設定
まずは簡単設定に必要なプラグインのインストールから始めます。
プラグイン・Contact Form 7
一つ目はこのContact From 7をインストールします。このプラグインはメールフォームのカスタマイズを目的としたプラグインです。
プラグインの新規追加を選択しキーワードの検索欄にContact Form 7を入力して、検索結果から表示されたContact Form 7のインストールボタンを押してインストールします。
WordPress Importer
二つ目はWordPressをインストールします。このプラグインはWordPressにファイルをImportするプラグインです。
上と同じように検索欄にWordPress Importerを入力してインストールしましょう。
２つのプラグインをインストール出来たらMinimableのファイルをインポート（外部からWordPressにファイルを取り込む）する作業を行います。
ファイルの解凍とインポート
それでは前回ダウンロードしたテーマファイルを解凍します。解凍したらdemo-content.xmlを使うので存在を確認して覚えておきます。
次にWordPressでインポートファイルを選択して取り込みます。
ツール > インポートを選択してWordPressをクリックしてファイルを取り込む。
WordPressを選択するとインポートするファイルを選択という画面が出ますので、そこで先ほど確認したdemo-content.xml を選んでインポートします。
するとAssign Authorsの画面になりますので、Import Attachmentsにチェックを入れてSubmitします。
この後に「楽しんで！」が出たら問題なく完了です。
Sponsored Link
動作の設定
さて、ここからが本題です。まずこのMinimableは普通にインストールしただけでは使えないのです。きちんと手順を踏んで初めてあの美しいデザインが適用されます。なのでここは凄い重要です。これがわからずMinimableのテーマを諦めた方は何人いるのでしょう。残念です。
それでは外観 > メニューを選択して、下の方にあるPrimary Navigationのチェックボックスにチェックを入れます。チェックを入れたら必ず保存ボタンを押して設定を保存しておいてください。
次に設定 > 表示設定を選択して下の画像のようにチェックと選択を行ってください。保存も忘れずに。
これでサイトを確認してみると…。美しいデモサイトを再現できたでしょうか？
色々わけわからない人はこれからいじってみる方がいいかもしれないですね。ちなみにMinimableを一回設定して断念した人や、色々イジってデータが残ってる人はきちんと消してから再度設定し直すのがおすすめです。
次の回でお話ししますがMinimableのデザインが適用されないのはパーマリンクのせいなのです。デザイン適用されてない方はパーマリンクを見直しましょう。詳しくは次回で。
]]>
Minimableを知らない人はこのデモを
まずはWordPressのMinimableのテーマデモを見てみましょう。こちらMinimable
素晴らしく美しくカッコイイですね。作者はイタリア人みたいですので流石と言った所ですかね。次に情報としては以下を参考にして下さい。2015/05/04 現在
- 主要ブラウザに対応
- レスポンシブデザイン（モバイル端末対応）
- アニメーション効果の切り替え有り
- ロゴアップロードが可能
- ファビコンの設定有り
- メインカラーの変更有り
- 非公式WordPressテーマ
ダウンロード
今回使うテーマは公式WordPressのテーマにはないので作者のDownloadページにいきテーマをダウンロードします。こちらがDownloadページ
ダウンロードしたら早速インストールしていきましょう。
Sponsored Link
インストール
まずは自分のサイトのダッシュボードまで行き外観 > テーマまで移動します。
テーマをクリックしたら新規追加のボタンがあるのでクリック
クリックしたらテーマのアップロードを押してテーマの追加でファイルの選択をクリックし、先ほどダウンロードしたテーマをそのまま（拡張子がzipのまま）選びます。
ファイルを選択したら今すぐインストールボタンが押せるようになるのでクリックしてインストールします。
これでインストールは完成です。
次はインストール後のサイト構築における各種設定などを解説します。
Sponsored Link
なぜなら周りを見る時楽しくなる！
色の事を知れば色々なケースで役に立つと思います。
って事で簡単に色とは何かを見ていきましょう。
色の概念
光の三原色と色材の三原色があるのはご存知でしょうか？
光の三原色はwebやディスプレーを通して見る時の原色で、もう一方の色材の三原色は印刷や絵の具などを用いた場合の原色です。
光の三原色は「赤色、青色、緑色」になり、色材の三原色は「黄色、赤紫色（マゼンダ）、空色（シアン）」になります。
二つ見比べてみると表裏一体だという事がわかりますね。
色の組み合わせや確認などで便利なのがカラー・ホイールです。カラー・ホイールを使うと私のような素人でも簡単に基準となる色から自然な色の組み合わせを探し出す事が出来ます。
なのでカラー・ホイールを使って色の組み合わせの勉強をしていくことにします。
Sponsored Link
カラー・ホイール
カラー・ホイールとは色を選択する際に表示される円形のカラーチャートのこと。色環、色相環ともいう。
このカラー・ホイールを使えば、ほぼ確実に上手くいく組み合わせを見つけ出す事ができるらしいので検証してみましょう。
補色
カラー・ホイールで真向かいの位置にある色同士は補色の関係にあるそうなので、どちらか一方をメインカラーにしてもう一方をアクセントカラーで使うと上手くいく事が多いみたいですね。
それではサイトのヘッダーに使っている画像を例に色々な色を試してみましょう。
補色その１
- メインカラーは明るい緑
- アクセントカラーは明るい紫
補色その２
- メインカラーは明るい黄色
- アクセントカラーは明るい青
補色その３
- メインカラーは明るい赤
- アクセントカラーは明るい青
補色その４
- メインカラーは明るい紫
- アクセントカラーは明るい緑
補色その５
- メインカラーは明るい青
- アクセントカラーは明るい黄色
補色その６
- メインカラーは明るい青
- アクセントカラーは明るい赤
どれも悪くはないと思うのですがいかかでしょう？
次はトライアドという色の選択方法を検証してみましょう。
Sponsored Link
トライアド
等しい距離にある３つの色の組み合わせは、心地よい色のトライアドを作り出すそうです。それではサイトのヘッダーに使っている画像を例に色々な色を試してみましょう。
どれも悪くないと思いますが少し寂しい感じはします。
次はトライアドの中のスプリット・コンプリメント・トライアドという配色を検証してみます。
スプリット・コンプリメント・トライアド
これはメインカラーの真向かいにある補色を見つけその両隣にある色を選択するという方法です。この組み合わせはやや洗練された印象を与えるそうですので、同じように試してみましょう。
今回はよりわかりやく見れるように中央付近で色を分けてみました。
悪くはないんだろうけど何か違う感じは否めない。
他にもカラー・ホイールの隣り合わせにある色を使って類似色の組み合わせや、メインカラーから90度の場所にある4つの配色でテトラードなどさまざまな配色があるみたいです。
次に色の明るさと暗さについて見てみます。
色にはさまざまな明るさや暗さがありそれらを含めると無限の色の数が生まれます。
カラー・ホイールで言うと円の外側に原色（ヒューと言うらしい）がありヒュー（原色）に黒を加えるとシェード、ヒューに白を加えるとチントになります。
カラーホイールの見方
その色たちは暖色（赤か黄色を含むもの）と寒色（青を含むもの）に分ける事ができます。ここでポイントなのが寒色は引っ込み暖色は前面に出てくると言う事です。こんな感じで
とまぁこの原理を上手く使えば理にかなったデザインができそうですね。
今回は長くなりましたがもっともっと奥が深いので色に関してはちょこちょこ続けていきたいですね。
Sponsored Link
基本原則の復習その１
まずは近接のおさらいをします。今回の復習でも前に習って同じように素材を使って復習していきます。
それでは復習をするまえの素材を確認してみましょう。（以前の資料は大きさが適切ではなかったので今回から横にします。）
近接とは
- 近接の目的は様々な要素をページ上で組織化し可読性を高める
- どこから見ればいいか、どこを見ていいか分かりにくい場合は近接ができていない
- どかから見て終わりはどこか明確にする
- 組織化するといってもページ上にグループを作りすぎない。適切な個数は３〜５個（内容による）
これをまずは近接の原則に当てはめてみます。
人間の目は上から物を見ていく習性があるのでタイトルを太字にし、グループ化（近接）してみました。次は整列を加えてみましょう。
Sponsored Link
整列とは
- ページの一体化と組織化
- 強い整列は洗練された表現、格調ある表現、楽しい表現、真剣な表現を生み出す主役になる事がある
- 要素を意識的に配置しましょう。空間的に離れていても揃える事ができる他の要素を見つけ出し整列させる
それでは近接を当てはめた上から整列を加えていきます。
タイトルをもっと大きく大胆に、全てを左揃えにして強い整列を意識してみました。次は反復を加えてみましょう。
Sponsored Link
反復とは
- すでに存在する一貫性を高める
- それによってより一体化と面白さを洗練する
- 一貫性がなければ作り出す
- 反復は洋服のアクセントに似ている
それでは更に反復を加えていきます。
タイトルには目立つように中抜きを白で際立ててみました。見出しの字体と文字色を同じに。次は最後のコントラストを加えてみます。
Sponsored Link
コントラスト
- コントラストはページに面白みを作り出す事、それにより情報の組織化を支援する
- 線の太さや色、形、サイズ、空間などでコントラストを付ける
- 大切なのは強調する事、あくまでもはっきり違いを強調する事
それでは最後のコントラストを加えてみます。
上のタイトルをアクセントカラーで囲ってみました。そして下も同様のアクセントカラーで色をつけて完成です。
最初の近接から比べるとましになったのではないでしょうか？基本原則はこれで終了です。
Sponsored Link
具体的にコントラストとは何か？を記事にしてみます。
基本原則・コントラストその１
コントラストで生み出される効果はページに面白みを作り出す事と、情報の組織化に役立つそうです。それを踏まえた上で前回作った物に面白みがあるか見てみましょう。
これが前回
Sponsored Link
基本原則・コントラストその２
今回勉強したコントラスト前回作ったやつに適用させてみた。
うーん、使う色が変なのかなー。
難しいなー。
とりあえず今回のコントラストのまとめ
- 線の太さ、色、形、サイズ、スペースなどでコントラストを付ける
- コントラストをつけるなら太そうな線ともっと太そうな線でコントラストを付けない。全く同じでないならはっきりと違いを付ける事
次はこの原則の復習をします。
Sponsored Link
具体的に反復とは何か？を記事にしてみます。
基本原則の反復その１
いつもと同じように前回勉強した物と比べてみましょう。まずは前回作ったものを見てみましょう。
Sponsored Link
基本原則の反復その２
そして今回勉強した反復を取り入れたのがこれ
反復のまとめ
- 反復とは同じ字体やサイズ、色などを取り入れて統一感、一体感などを強化するという物らしいです。
- そして反復の基本的な目的は一体化や統一感、面白さを加える事だそうな。
- 要は前回の整列に続いて見出しや一体感のある要素を意識的に面白くしようって事だと思うので上のようにしてみました。
- 反復は洋服に例えるとアクセントだそうです。
難しいですね。
次はコントラストを勉強します。
Sponsored Link
具体的に整列とは何か？を記事にしてみます。
整列その１
まずはこちらをご覧下さい。
前回の近接の時に作った不出来なものですが、これを今回の整列の原則を使ってもう一段階カッコよくします。
で、具体的に何をしたのかと言うと、近接の親戚みたいなもんで文字やオブジェクトの位置を揃えます。それにより見やすくグループ化しようって事を学びました。
Sponsored Link
基本原則の整列を元に編集したらこうなった
整列のまとめ
- ページ上の全ての物を意図的に配置する
- ページ上の全てのオブジェクトが視覚的つながりをもつようにする
- 一体性を大切に各要素が離れていても配置で結びつけるようにする
- 同じページで２種類以上の文字揃えを用いない
- とりあえずはダメ
次は反復を勉強する
Sponsored Link
具体的に近接とは何か？を記事にしてみます。
近接を適用するその１
近接を勉強する前の私の作った自己紹介文を見てみましょう。
勉強前なので色々わかりにくい & 醜いです。
何も言えない、酷すぎて。
Sponsored Link
近接を適用するその２
では基本原則の近接に従って編集してみます。
近接のヒント！
近接とは互いに関連する項目は近づけてグループ化し、情報を組織化するのに役立ち、混乱を防ぐ役割を果たします。
先の例で説明すると、勉強前は見やすいと思い空の行を開けていましたが、勉強後の編集では近接の原則を意識して互いに関連する項目は近づけてグループ化してみました。
もちろん完璧ではございませんが、なんとなく見やすくなったのではないでしょうか？
近接のまとめ
- 各オブジェクト（項目、ユニット）をグループ化する
- 全体を見渡して視線が止まった回数が3~5回を超えていればグループ化できないか検討する
- スペースに空きがあっても無駄にものを配置しない
- グループ間に均等の空白を作りすぎない
次は整列を勉強します。
Sponsored Link
やめる理由
私は本業とは別に個人でAppleのアプリなどを作っていますがどうしても見た目の出来が悪い。実現したいUIやデザイン面でもの凄く苦戦し結果使いやすさとは程遠い物が出来上がります。
プログラムは独学ですが、何とかやりたいと思った事が出来る程度にはなりました。しかしやりたい事を実現する為のデザイン、UI / UXの引き出しが余りに無さ過ぎて . . . 。色々参考に手を加えたりしてみたのですが全然ダメ。自身が使いたくなりません。
デザインできる人を探そうにも近くにそんな人いませんし、相方はゴリゴリのプログラマですし、雇えるお金もないので自分でやる事に決めました。
Sponsored Link
今日でプログラマやめます。
やめてどうすんの？
もちろん新しく素人デザイナーとして勉強します。醜いの嫌い。
具体的に何を勉強するかをリストアップしてみました。
- 現在Word Pressを使ってアプリ紹介や技術の忘備録などを記事にして公開していますが笑えるほどダサい（読みにくい）のでwebページの作り方やレイアウトについて勉強する。
- グラフィックデザインを勉強する。これはwebデザインだけでなく紙面のデザインも勉強して幅を広げ他と差別化を図りたい。やると決めたら貪欲に。
- UI / UXの勉強。目的はこのユーザーインターフェイスの向上にある。UIとデザインは正しくイコールだと思う。昨今のフラットデザインでボタンや配置は明らかにいい物と悪い物に分かれているように思う。なので基礎は外せない。しっかりやらねば。
私もこれから勉強するよ！デザイン？何それって方達の参考になれば幸いです。もちろん自分が見直す為に書いている or 忘れないようにアウトプットするって目的もしっかりやっていきたい。
新しい目的ができて新しい目標を設定した時は楽しいよね！簡単じゃないと思うけど諦めずに頑張ろう。
Sponsored Link