WordPress Themify編

たった1日で高機能なWebサイトを作れるようになろう

講座資料（PDF）

ダウンロードして、参加者の人数分印刷して使用してください。

• 講座資料：WordPress講座 Themify編

ワークショップ動画

講座の意図、狙いを理解しながら動画を見ましょう。

イントロダクション

ウォーミングアップ

モックアップを作る

モックアップを作る発表

モックアップを作る2

モックアップを作る2発表

Row&Cols

Rows&Cols発表

Themifyの操作

Rows&Colsを実装する

Rows&Cols発表会

パーツ探求

パーツ探求発表

仕事に学習を組み込む1

仕事に学習を組み込む1振り返り

仕事に学習を組み込む2

仕事に学習を組み込む2振り返り

まとめ

特典マニュアル

【準備編】Themifyとは？

Themifyとは、便利なプラグインもセットになっている有料テーマのことです。

Themifyの3つの特徴

(1)独自で開発できるほどの商品力

WordPressの有料テーマは、通常「ThemeForest(テーマフォレスト)」などのポータルサイトにて販売されていることが多いです。
一方Themifyは、独自で集客して、独自で配布できるほど、人気のテーマで、商品力もかなり高く私たちが最もお勧めできるテーマです。

(2) 価格が安い

有料テーマは「1ライセンス1サイトのみ」の場合が多いのですが、Themifyでは「1ライセンス複数サイト可能」なので、複数サイトをお持ちの方にはかなりお得なテーマです。
また、政策代行にも使うことが認められているのも、Themifyの魅力の一つです。

(3)高機能

Themifyは高機能でたくさんのことができます。
その中でも「Post type Builder」というものを使うと、「カスタム投稿タイプ(投稿の型)」を作ることができ、あなたの作りたいサイトを圧倒的に作りやすくカスタマイズすることができます。

【準備編】注意点と学び方

Themifyを使う上で、2つの注意点があります。

(1) 使いながら学べる状態を目指す

Themifyはすごく高機能です。
Themifyの編集画面にはたくさんのボタンがあります。一つボタンをクリックすると、さらにたくさんのボタンが出現します。ボタンの数だけ機能があるので、かなりの数の機能がThemifyにはあることがわかります。
これらの膨大な機能を全て覚えてから操作するのは至難の技です。
そこで、「その場で学べる」ようになりましょう。
その場でボタンをクリックしてみて、「あー、こんな感じね」と思えるようになれば、必要な時に必要な分だけ学びながら作業を進めることができます。
ぜひ「その場で学ぶ力」を鍛えるためにも
・解説の動画で見た通りに、間違えないように進めよう
とするのではなく
・あちこちをクリックして見て、その場で学びながら進める
ことを意識しましょう。

(2) 「学ぶ時」と「作るとき」は分けて行うこと

Themifyを学ぶために、いろいろクリックして探求することはすごく良いことですが、実際にWebサイトを作る時は、Themifyを触ることをストップしてまず「こんな見た目のサイトを作りたい」ということを明確にしましょう。
モックアップと呼ばれる下書きを書いて、「あとはこのモックアップどうりに作るだけ」という状態を作っておかなければ、あれもこれもと機能に翻弄され、Webサイトを作れなくなってしまいます。
つまり、実際にサイトを作る時には

1. Themifiyを探求して、「こんなことができるんだ」という全体像を把握する
2. モックアップを作る
3. 実際に作る

の3ステップとなります。

【準備編】購入方法

上記のボタンをクリックすると、CLUBのプランを選択するページにジャンプできます。なお選択基準は、

• すごいレベルで製作代行する予定があるなら  — Master Club
• 普通のレベルで自サイトを作るなら — Standard Club

違いは「カスタム投稿タイプ」という機能が使えるプラグインが付いてくることです。この機能は、「独自のデータ形式」を作ることができるものです。
例えば、

• 「物件データ」を作って、入力して、それを一覧表示させる
• お知らせ専用データ形式を作って、簡単にお知らせだで投稿し、表示する
• メニューだけを簡単に投稿できるようにする

など、「本格的な、作り込まれたサイト」が作れるようになります。

Paypalへの入金方法

Themifyを購入するにはPaypalでお支払いをする必要があります。Paypalへの入金方法はこちらからご確認ください。
また、Vプリカでのお支払いはできません。(Vプリカから拒否されるサイトになっているようです。) なのでPaypalへの入金は、

• ビジネスアカウントを作るか
• 他のPayPalメンバーからの送金により口座残高へ入金してもらう

のいずれかの方法で行ってください。

【準備編】インストール

Themifyのテーマ、プラグインのインストールの方法を紹介します。
(1)メニューの Member より Member Area をクリックします

(2)購入時に入力したメールアドレス、パスワードを入力して、ログインしましょう

(3)専用ページにアクセスし、購入プラン名、ダウンロードできる機能が表示される

(4)早速テーマをダウンロードしましょう。専用ページ内の「Themes(テーマ)」という項目を探します。

(5)お好きなテーマをクリックして、ダウンロードしましょう(今回はUltraを使って説明します)

(6)テーマをダウンロードしたら、次は新規テーマとして使用したいサイトにインストールします。WordPressの編集画面の左メニュー部分より「外観」をクリックしましょう。

(7) ダウンロードした「Ultra」のテーマをインストールします





(8) Themifyのテーマには、対応しているプラグインもセットでインストールをする必要があります。写真のように画面上部に対応プラグインのインストールの案内をクリックして有効化(Activate)しましょう。





(9) (7)で表示されていた「必須プラグインのインストールの案内」が表示されなくなったら「Ultra」テーマのインストール完了です。

【準備編】サンプルのインポート

Themifyの仕組みを理解する際に有効なのが、「サンプルを分析する」という方法です。
サンプルはThemifyを使って完成されたWebサイトです。サンプルをインストールして、分解したり、分析することで、themifyの基本的な使い方やテクニックを盗むことができます。
反対に、あなたが実際にWebサイトを作る際にはサンプルに使うことはおすすめしていません。よく使われるレイアウトにぴったりくるものが多くないので、カスタマイズしようと思うと「ごちゃごちゃ」してしまいます。
(1)サンプルは編集画面内の「themify Ultra」の「Skin&Demos」よりインストールすることができます。

(2) 分析、研究したいサンプルを選びましょう。どんなサンプルかを見る時は、「VIEW DEMO」をクリックすると見ることができます。


(3) 分析したいサンプルが決まったら「IMPORT」をクリックしましょう

(4) サンプルをインストールするために必要な「プラグイン」や「アドオン」の一覧が表示されますので、themifyの専用ページhttps://themify.meにログインしてダウンロードします。


(5) 全てのプラグインのダウンロードが完了したら、WordPressのサイトにインストールしましょう。インストールは編集画面の「プラグイン」=>「新規追加」から行います。

(6)アップロード=> ファイルを選択 して、ダウンロードした全てのプラグイン、アドオンを追加しましょう。



(7) プラグイン、アドオンを全てインストールできたら、再度サンプルの IMPORT を行うと、今度はスムーズにインポートを行うことができます。

(8)実際にWebmサイトを確認すると、サンプルがインポートされています。これらのサイトがどのように作成されているのかをチェックして、themifyの仕組みやテクニックを学びましょう。

【準備編】全体像

Themifyの全体像を理解しておきましょう。大きく3つの特徴があります。
(1)カスタマイズは、管理メニューのこの部分(画像)から行う

(2) ページの編集は、通常の編集画面ではなく「Turn On Builder」から行う


(3) 「Themify Builder」を使って、ページのレイアウトを自由に編集をすることができる

【準備編】マスターステップ

Themifyは高機能で、あらゆることができます。
そのため、「全ての機能を覚えてそれか操作をする」ことはできません。そこで今から紹介する4ステップを使ってマスターをします。

マスター4ステップ

ステップ1 : 探求するコツを身につける

「探求する」とは、「仮説を立てて、実際に編集して見て、実際の結果を確認する」をぐるぐる繰り返して学ぶことです。
このコツを身につけることができれば、WordPressを触れば触るほど理解をすることができるようになります。
また、前提の知識を知っておくと操作をしている時に予想しやすくなり、結果的に学習が促進されやすくなります。

ステップ2 : 全体像を「ざっ」と理解する

探求のコツが掴めたら、Themifyの全体像を「ざっ」と知っておきましょう。もちろんこのビデオなどを見て知るのも良いですが、やはりご自身で実際に操作をすると全く学習効果が違います。ぜひ、ご自身で触って見てください。

ステップ3 : デモをインストールして、研究する

Themifyにはサンプルという「既に完成されたもの」をインストールする仕組みがあります。このサンプルを分解して、分析したりして、どんな仕組みが使われているのか？どんなテクニックが使われているのかを分析しましょう。

ステップ4 : 実際に作る

いきなり難しいものでなくていいので、とにかくWebサイトを作ってみましょう。

【準備編】設定の全体像

Themify の設定の項目について紹介します。

General (一般設定)

サイト全体に関わる設定を行うことができます。難しい内容も含まれるので、今回は設定しておくとよい項目を紹介します。

DEFAULT LAYOUTS

レイアウトに関わる設定を行うことができます。

【準備編】全体のデザインをする

Webページを作る時はまず、紙などを使ってモックアップ(下書き)を書いて自分がどんなサイトを作りたいかを明確にしておきましょう。

モックアップの作成が終わった方は、こちらの動画を見て、「Themifyを使って、どのようにイメージに近づけていくか」を知りましょう。

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) モックアップ(下書き通り)のレイアウトを作成する


なお、具体的な作成の方法は、[Row&Cols]で紹介しているのでご確認ください。

2. Turn On Builder で、内容を追加する

(1) Turn On Builder をクリックして編集画面に切り替える

(2) Themify Builderで設計したレイアウトの内容を編集していく

【実践編】資料ダウンロード

「かっこいいWebサイトを作ろう 実践編」では、基本的にワークが中心の内容となっております。

• Themifyを使って、かっこいいWebサイトを作ってみたい
• ここまでのThemifyの理解を試してみたい

方は、ぜひこの実践編を試してみてください。
ワークの中の資料はこちらです。クリックしてダウンロードし、印刷をして使いましょう。
themify資料

【実践編】Themifyにワクワクしよう

何か新しい知識や技術を獲得する時には、「取り掛かる前に、ワクワクした状態を作る」ことが重要です。
まずは「今からThemifyを学ぶこと」にワクワクしている状態を作りましょう。

• Themify に期待していることを紙に書き出したり
• Webなどで検索して、何かができるかをざっと見てみたり

「ワクワクする状態」になるための工夫をしてみましょう。
※ 動画の内容に、「このページもThemifyで作りました」という表現がありますが、これは過去に使っていたサイトのことです。

Themifyで作れるサイトを知る方法

Themifyのサイトにアクセスして、デモサイトを見てみましょう。
(1) http://themify.me にアクセスする


(2) 気になるサイトの「DEMO」をクリックして、デモサイトを見てみる



(3) ワクワクするデモサイトを見つけよう

【実践編】デザインの目を養おう

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サイトの共通部分を誰かに話しをしてみる
です。
ポイントは、「正しく行うのではなく、楽しくやってみること」です。難しく考えすぎず、あたかもデザインの専門家になったようなフリをしながら話してみましょう。
思いついたことをどんどん言葉にすることで、自分でも思ってもいなかったデザインのルールを発見したり意外な工夫を発見することができるかもしれません。

【実践編】写経にチャレンジしよう

よくデザインされた商品は、「パッと」見た時にその会社の「らしさ」を感じます。
なぜ、一瞬で「らしさ」を感じるかというと、私たちの脳がデザインされた商品を見た瞬間に、「文字」や「色」、「レイアウト」などの要素から情報を得て、判断しているからです。
プロのデザイナーは細部にこだわることで、商品に「らしさ」を宿しています。
この「らしさ」のことを「トーン&マナー」と言います。

写経をして、トーン&マナーを感じよう

トーン&マナーを学ぶために、効果的なワークが「写経」です。
写経とは、「まるっきり写す」ことです。まるっきり写そうと思うと、「文字の大きさ」「空白の大きさ」「割合」などをゆっくり、じっくり見る必要があります。
この「ゆっくり、じっくり見る」ことを行うと、普段見逃している、デザイナーの細部へのこだわりを発見することができます。
つまり、写経をすることで、「らしさ」を生み出している要因を分析することができるのです。

写経の2ステップ

(1) A4の紙を準備する
(2) 好きなWebページを書き写してみる
です。
ポイントは、なんとなく写すのではなく「文字の大きさ、レイアウトなどの比率までも注目して書き写す」ことです。
目標は、Webサイトを縮小コピーして、写経した紙を重ねても一寸の狂いもないほど全く同じになるよう書き写すことです。

デザインを「ズラし」てみよう

守破離は、弟子が師匠から技を学ぶ学び方の1つで
守・・・型を「守」る
破・・・既存の型を「破」る
離・・・型から自由になり、「離」れる
という、学習プロセス1つずつを漢字で表し、繋げた言葉です。
デザインを学ぶプロセスをこの守破離に当てはめて考えると、写経をして型を守った後は、型を「破」ることが大切です。
今回は、写経したWebサイトを「ズラし」てみましょう。
レイアウトや構成はそのままにして、文字や写真などを、あなたの作りたいサイトの内容に置き換えてみてください。
例えば、「コーヒーの焙煎所のWebページを動物園のWebページにズラしてみる」と、このようなカンジです。

オリジナル	ズラしたもの

動画の中では口頭でズラしていますが、実際に行うときは写経をした時と同じように、「紙に書き出す」とより効果的です。

【実践編】トーン&マナーを学ぼう

トーン&マナーを最速で学ぶ方法が
「トーン&マナーマトリックスで分析してみる」
ことです。

同じ「ホテル」のWebサイトでも

• 「高級でエレガントなリゾートホテル」と
• 「大衆向けのゲストハウス」

では、全く印象がガラリと変わります。

高級ホテルのWebサイト	ゲストハウスのWebサイト

このように、サイトの見た目から得られる情報をコントロールすることで、閲覧者に「らしさ」を伝えることができます。

マトリックスを使って、分析する

トーン&マナー を分析するには、
「1つの分野のものを「値段」と「個性」のマトリックスで分析する」
のが効果的です。
マトリックスはこのようになります。

縦軸は「クラス」といって、値段の高い低いを表し、
横軸は「タイプ」と言って、個性を表します。
この2つの軸によってできた4象限に、色んなサイトを当てはめて分析をすることでデザインのセンスを磨くことができます。
分野を1つに限定して、「違い」に注目することで、より細かい違いを発見することができ、結果的に「らしさ」を生み出す要素を早く発見することができます。
分析の4ステップ
(1) あなたの詳しいブランドを決める
(2) 4つの象限にそれぞれ当てはまるものを入れる
(3) Webサイトを見てみる
(4) 4象限のマッピングにふさわしいデザインが反映されているかを確認する

ファッションブランドで考えてみると、、

例えば、「ファッションブランド」で考えてみましょう。

• 「高い」かつ「好き嫌いが分かれる」・・Yoji Ymamoto
• 「高い」かつ「無難」・・MARGARETHOWELL
• 「安い」かつ「好き嫌いが分かれる」・・H&M
• 「安い」かつ「無難」・・GU

マッピングのポイントは、あなたのイメージでマッピングして良いということです。あなたが「そう」感じているのには必ず理由があるからです。
大切なのは一般的に正しく分類するのではなく、あなたに「そう」感じさせている要因を分析し、理解することです。
マッピングができたので、次はそれぞれのブランドのWebページが、しっかり消費者のもっているイメージとマッチしているかを確認します。

Yoji Yamamoto (「高い」かつ「好き嫌いが分かれる」)のWebサイトを見てみると

色も白黒と高級感あふれる印象になっており、文字(フォント)も細めの鋭くてカッコ良いイメージでまとめられています。
全体のデザインも「ロゴ以外何も表示せず、背景は真っ黒」とかなり攻めたデザインになっています。
ロゴをクリックすると、

文字が少なく、個性的なモデルさんを使ったファッションショーの写真を背景にサ使っています。なんとなくハイブランドな印象を感じます。

GU (「安い」かつ「無難」)のWebサイトを見ると、

一方でGUのサイトを見てみると、

一番はじめに「パッと」目には入ってくるのが「はじめてご利用の方は送料無料」という文字でとても安心感があります。色もカラフルでカジュアルです。
また先ほどの Yoji Yamamoto のサイトと対照的に、たくさんの写真や文字、金額が書かれていることで、親近感を感じるWebサイトになっています。

フォント、スペース、色の違いに注目してみよう

これらのサイトを「パッと」みた時に感じる「らしさ」を構成している要素として

• フォント・・・太いゴシックなのか、細い明朝なのか
• スペース・・・広いのか、狭いのか
• 色の違い・・・明るいのか、暗いのか

などがあります。
あなたの得意な分野でマッピングをして、これらの構成要素から分析をしてみましょう。
この分析を繰り返すことで、あなたが商品やサイトに宿したい「トーン&マナー」を実現するためのアイデアをどんどん出せるようになります。

【実践編】Themifyの仕組みを学ぼう

Themifyでサイトを作る時は、
(1) Row & Colsでサイトのレイアウトを設計して
(2) 設計したレイアウトに内容を追加する
というステップでサイトを作ります。
Row & Cols でレイアウトを設計すると、「パソコンで見ても」「スマホで見ても」どんな画面幅になっても、綺麗にページ表示してくれます。この仕組をレスポンシブデザインといいます。
この仕組みのおかげで、Themifyで作ったサイトは自然とレスポンシブデザインになります。
なぜ、このような仕組みがあるかというと、ひと昔前に比べてスマホでWebサイトを見る人が圧倒的に増えたからです。

Row = 行、Cols = 列

Row とは行の事で、サイトを横に分割する透明の箱のようなもので、Colsとは列の事で、サイトを縦に分割する透明の箱のようなものです。
この透明な箱が、画面幅に合わせてうまくスライドをすることで、「パソコンで見てもスマホで見ても綺麗に見える」ようになります。

画面幅がスマホサイズになると、Colsが自動で下に移動して綺麗な表示をしてくれる。画像は http://qonversations.jp より引用しています。

Row & Cols を分析しよう

資料を印刷して、既存のWebサイトがどのようRow&Colsで設計されているのかを分析してみましょう。

https://legacy.toiee.jp/wpa1/themify-work/download-text/

【実践編】Themifyの全体像

いよいよこれよりThemifyを使って実際にWebサイトを作成していきます。
その前に、もう一度復習も兼ねて「Themifyの全体像」を紹介します。
Themifyの全体像は

1. その場で学ぶが鍵
2. 作り始める前にモックアップを作る
3. Row&cols でレイアウトを設計する

その場で学ぶが鍵

Themifyで使うことができる機能はいちいち覚えなくても、実際に使う編集画面に表示されています。

そのため、暗記する必要はなく使いたいタイミングで「ちょっと触ってみて、あーこんな感じね」と理解して使うことができます。
このような状態になるためには「その場で学ぶ力」が鍵です。
https://legacy.toiee.jp/wpa1/sample-page/how-to-learn-wordpress/

作り始める前に、モックアップを作る

Themifyに限らず、Webサイトを作る時には「いきなりパソコンを使う」のではなく「作り始める前にモックアップを作る」ことが重要です。

料理で考えるとわかりやすいです。

例えば、目の前に最高の食材が揃っていても、何を作るか決まっていなければ、食材のレパートリーの多さに翻弄され、どの食材を使おうかを迷ったあげく何も作る事は出来ません。

一方で、どんな料理を作りたいかが明確に決まっていれば、大量の食材の中から必要なものを選ぶことができるし、選んだ食材を生かすために調味料を工夫するなどアレンジも出来ます。

Themifyも同じで、先に作りたいデザインを明確にしておくことで、「スムーズに必要な機能」を選び出したり、自分なりにアレンジすることだって可能です。

Row&Colsでレイアウトを設計する

Themifyでは、Row&Colesを使ってWebmサイトをレイアウト部分だけを先に編集する必要があります。
ここでは、「あー、こんな感じで作るのね」と思えればOKです。次のワークで実際にRow&Colsでレイアウトを設計することを行います。

【実践編】Row&Colsを探求しよう

「Row&Colで実現したいページのレイアウトを設計する」をマスターするためのワークをしましょう。
目標は「イメージ通りのレイアウトをRow&Colsで設計できるようになること」です。

実際にレイアウトを設計してみる

この画像はRow&Colesで設計されたページをプレビューしているものです。このレイアウトを、Row&Colsを使って再現してみましょう。
具体的な手順書や参考資料は、以下の「資料ダウンロード」から行うことができます。必ず資料をダウンロードしてワークを行いましょう。

Themifyのバージョンアップによって、多少文言や操作が変更されることがございますが大切な事は、「イメージ通りにレイアウトを設計できるようになる事」です。仮に資料と文言が違っても、イメージ通りに設計できるようになればOKです。

https://legacy.toiee.jp/wpa1/themify-work/download-text/

【実践編】Turn On bulderをマスターしよう

「Row&Colsで設計したレイアウトに内容を入れていく」をマスターするためのワークをしましょう。
使うのは Turn On Builder という機能です。
この機能を使えば、サイトの見た目を見ながら画像やテキストなどのパーツを編集をすることができます。
(1) 固定ページを開くと、ページ上部に「Turn On Builder」と表示されるのので、クリック

(2) 実際の画面を見ながら編集できる画面が表示される

(3) それぞれのパーツをクリックすると、編集可能。モックアップで作成したものを実現するように編集する。

【実践編】パーツを探求しよう

WordPressやアプリの世界では、ある日突然画面が変わったり、機能が変わったりします。
Themify のパーツも例外ではありません。
そこで、Themifyの機能を全て暗記するのではなく「その場で探求して身につける練習」をしましょう。そして、そのパーツが「どんなことができるのか？」を探求してみましょう。

パーツ探求の具体的なステップ

探求ステップは3つです。

1. 時間を10分セットする
2. 探求する
3. 探求の仕方を改善する

です。
探求の仕方を改善することで、「その場で学ぶ力」が向上し、結果多くのパーツを使いこなせるようになります。
以下に、探求の仕方の例を紹介するので、これを参考に探求してみましょう。

(1) Themify Builder の左上の「+」をクリックしてパーツ一覧を表示する

(2) 気になるパーツを選択して、ドラック&ドロップで追加する

(3) 「変更をプレビュー」をクリックして、パーツの内容を編集する

(4) Turn On Builder をクリックして、編集画面に移る

(5) Styling から色々編集をしてみる

探求方法を改善する

ちょっと探求してみたら、「探求の方法自体を改善」してみましょう。

• Google で検索してみる
• 詳しそうな人に聞いてみる
• 時間を計測して探求してみる

など、いろんな工夫ができると思います。今回は一例の「よく使うRowのセットを分解して、探求する」方法を紹介します。
(1) パーツ一覧上部のメニューの「Rows」をクリックすると、ThemifyオススメのRowセットが出現する

(2) 気になる Rowセット を選択し、Themify Builder にドラック&ドロップする

(3) 「更新」して固定ページを表示する

(4) Turn On Builder から編集する

(5) 追加した Rowセットが出現されているので、カーソルを持って行って、「Edit」をクリックしてみる

(6) 色々触ってみて、どんなことができるのかを確かめてみる

パーツ一覧表を作る

Themifyで使えるパーツの一覧表があります。
この表の中の「機能」「どんなことに使えるか」は空欄になっています。この欄を埋めるようにパーツを調査する過程で、「その場で学ぶ力」「活用アイデアを考える力」「パーツの知識」を獲得できるようになります。

ぜひ、活用してください。
https://legacy.toiee.jp/wpa1/themify-work/download-text/

【実践編】目的に向かって作り込もう

Themifyを使ってサイトを作る時は、テンプレートをそのまま使ってサイトを作ることはあまりおすすめしません。

理由は、「テーマを使うと、自由にサイトが作れない」からです。
せっかくモックアップを作っていても、テーマが持っている特有の「投稿タイプ」「デザインルール」によって思い通りに作れなくなってしまいます。
なので、テーマを使うよりは「まっさらな状態から作りましょう」
(1)「Delite」をクリックして、あらかじめ設計されているRow&Colsを削除する

(2) まっさらな状態にして、0から作ろう

もうひとつのオススメな方法

もう一つのオススメな方法は「Rows」を使ってサイトを作るという方法です。
Rowsとは、Webページでよく使うパーツのまとまり集です。
このまとまりをまるでブロックのように組み合わせることで、簡単にWebページを作ることができます。
モックアップをシンプルに使っていれば、このRowsを使うとあっという間にWebサイトを作ることができます。
(1) Themify Builder では、よく使う Row セット(アイキャッチ、写真、メンバー紹介、マップ、フッターなど、、) をたくさん挿入できる

(2) Rowセット をうまく使えば、簡単にWebサイトを作ることもできる

実際のページ

(3) 後は、Turn On Builder で編集するだけ

ぜひ、テンプレートを使うのではなく、モックアップから作り始めましょう。

ティーチャー

ワークショップ進行レジュメ

以下のリンクを「副クリック」し、保存してください

• 進行レジュメ