アクティブな学生のためのスマートテクノロジー
Themify でデザインの大枠を装飾する方法
Themifyを使って、モックアップ通りのWebサイトを作る5ステップは、
(1)テーマを選ぶ
モックアップで作成した近いテーマを選ぶ。Ultraというテーマは高機能なので、かなりのレイアウト、フォントに対応することができます。
今回は、この「Ultra」というテーマを使って説明します。
(2)準備をする
「現在編集中のサイトが思い通りのサイトになっているかどうか？」を細かく確認するためには、編集画面とプレビュー画面の切り替えを素早く行う必要があります。
そこで、ブラウザのタブを2つ準備して、それぞれ「編集用」「プレビュー用」として使うことをオススメします。
(3)Skin を選ぶ
Skin はそれぞれデザインのルールの設定が違います。そこで、あなたの実現したいサイトに近いSkinを選びましょう。
ページの内容を編集していない状態では、細かいデザインのルールを発見するのは難しくフォントの違いくらいしか見えないかもしれませんが今回はそれで問題ありません。Skinは後から変更をすることも可能です。
現段階ではとりあえず、「Skinを変更してフォントが何となく変化するのを確認すること」「その中で、あなたのイメージに一番近いものを選択」できればOKです。
(4)細かくデザインを設定する
Settingの項目より、細かいデザインの設定を行います。
例えば、「THEME SETTING」の中の「Theme Appearance」という項目を設定すると、サイトのメインカラーを変更したり、ヘッダーの表示を変更することができます。
(5) もっと細かくデザインを設定する
Settingで編集したものより細かく設定をする場合は、編集画面の中の「customize」より編集を行うことができます。
この5つのステップを通じて、サイト全体の「色味」「フォント」など大枠の設定が完了した後に、具体的に固定ページや投稿ページの装飾を行うようにしましょう。
【準備編】ページを作成する
Themify でデザインの大枠を装飾する方法
Themifyを使って、モックアップ通りのWebサイトを作る5ステップは、
(1)テーマを選ぶ
モックアップで作成した近いテーマを選ぶ。Ultraというテーマは高機能なので、かなりのレイアウト、フォントに対応することができます。
今回は、この「Ultra」というテーマを使って説明します。
(2)準備をする
「現在編集中のサイトが思い通りのサイトになっているかどうか？」を細かく確認するためには、編集画面とプレビュー画面の切り替えを素早く行う必要があります。
そこで、ブラウザのタブを2つ準備して、それぞれ「編集用」「プレビュー用」として使うことをオススメします。
(3)Skin を選ぶ
Skin はそれぞれデザインのルールの設定が違います。そこで、あなたの実現したいサイトに近いSkinを選びましょう。
ページの内容を編集していない状態では、細かいデザインのルールを発見するのは難しくフォントの違いくらいしか見えないかもしれませんが今回はそれで問題ありません。Skinは後から変更をすることも可能です。
現段階ではとりあえず、「Skinを変更してフォントが何となく変化するのを確認すること」「その中で、あなたのイメージに一番近いものを選択」できればOKです。
(4)細かくデザインを設定する
Settingの項目より、細かいデザインの設定を行います。
例えば、「THEME SETTING」の中の「Theme Appearance」という項目を設定すると、サイトのメインカラーを変更したり、ヘッダーの表示を変更することができます。
(5) もっと細かくデザインを設定する
Settingで編集したものより細かく設定をする場合は、編集画面の中の「customize」より編集を行うことができます。
この5つのステップを通じて、サイト全体の「色味」「フォント」など大枠の設定が完了した後に、具体的に固定ページや投稿ページの装飾を行うようにしましょう。
【準備編】ページを作成する
Themifyでページを作るステップは
1. Themify Builder で、レイアウトを作成する
(1)固定ページ編集画面の下部にある Themify Control Panel の中の「Themify Builder」を選択
(2) モックアップ(下書き通り)のレイアウトを作成する
2. Turn On Builder で、内容を追加する
(1) Turn On Builder をクリックして編集画面に切り替える
(2) Themify Builderで設計したレイアウトの内容を編集していく
【実践編】Themifyにワクワクしよう
何か新しい知識や技術を獲得する時には、「取り掛かる前に、ワクワクした状態を作る」ことが重要です。
まずは「今からThemifyを学ぶこと」にワクワクしている状態を作りましょう。
Themify に期待していることを紙に書き出したり
Webなどで検索して、何かができるかをざっと見てみたり
「ワクワクする状態」になるための工夫をしてみましょう。
(１) 気になるサイトの「DEMO」をクリックして、デモサイトを見てみる
(２) ワクワクするデモサイトを見つけよう
【実践編】デザインの目を養おう
Themify をマスターするための3ステップ
Themifyをマスターするためのステップは3つです。
(1) 作りたいWebサイトのモックアップ(下書き)を作れるようになる
(2) 機能を「その場で学べる」ようになる
(3) 作りたいものを作りながらマスターする
です。
Themifyはあらゆることができる「高機能」なテーマです。そのため全ての機能を覚えきってから操作をするのは難しいです。
仮に、すべての機能を記憶したとしても、Themifyのアップデートなどが行われて機能が追加されたり、ボタンの位置が変化したりすることを考えると、また暗記しなくてはいけません。
まずはモックアップを作ろう
Webサイトを完成させるために必要な機能やボタンはそう多くはありません。
まずは「モックアップ(作りたいWebサイトの下書き)」を作れるようになりましょう。その後に、作ったモックアップをThemifyで作る過程でマスターしていきます。
まずは、このモックアップを作れるようになるために「デザインを見る目」を養いましょう。
デザインを見る目を養う方法
「デザインを見る目を養う」方法は難しくありません。なぜなら私たちは日常の中でデザインされたものに多く触れているからです。
例えば雑誌やお菓子の袋、Webサイトなども、全てプロのデザイナーによって知識と時間をかけてデザインされたものです。
これらのデザインされているものを、見て、分析することで、デザイナーの工夫や特定のルールを見出すことができます。
また、デザインされたものに触れた時に「自分がどのように感じているか？」 を意識的に観察することで、何を意図されたデザインなのかを考えることもできます。
なぜ好きなのゲーム
お気に入りのWebサイトをピックアップして、「そのサイトが好きな理由」を考えてみましょう。
あなたの「好き」を構成している要素が何かを考えてみることで、デザインセンスを磨くことができます。
なぜ好きなのゲームを4ステップ
(1) お気に入りのWebサイトを決める
(2) 決めたWebサイトが好きな理由を誰かに話してみる
(3) (1)(2)を3サイト分析を行う
(4) 3サイトの共通部分を誰かに話しをしてみる
です。
ポイントは、「正しく行うのではなく、楽しくやってみること」です。難しく考えすぎず、あたかもデザインの専門家になったようなフリをしながら話してみましょう。
思いついたことをどんどん言葉にすることで、自分でも思ってもいなかったデザインのルールを発見したり意外な工夫を発見することができるかもしれません。
