ページ制作方法

完全無料のホームページ作成ツールモビライズのページ制作法をご紹介

how to build a website for free

グローバルメニューフッターの設置

はじめにサイト内全ての共通パーツ、グローバルナビゲーションを設置します

Mobiriseのメニュー使い方
1

Create New Pageをクリック

メニューPages内からアクセスします。

2

ブロック一覧を表示

ページ右下下部の赤色+ボタンを押下します。

3

ブロックからヘッダーを選択

ブロック一覧が表示されます。一番上のMenu(グローバルナビゲーション)をクリックします。

グローバルメニュ設定

4. メニューをページ上部へ配置

メニューをドラッグしページ上部へ配置します。(白テキストの場合まだページ上では見えません。)

Mobiriseメニュー化確認

5. グローバル化の確認

グローバルメニューをサイト全体の共通化パーツとして設定しますか?と聞いてくるので、OKを押下。

MobiriseのHeaders(ヘッダー)

6. メインビジュアルを配置

次にHeadersをクリックしてみましょう。様々なメインイメージレイアウトが並んでいます。お気に入りのものをドラッグし配置してみましょう。

Mobiriseフッターの使い方

7. フッターの設置

グローバルナビゲーション同様、フッターメニューも設置します。こちらも全ページで共通パーツとなるようにグローバル化の確認では、OKを押下します。これによりメニューが増えた場合でも各ページごとの修正は不要になります。(テーマにより機能有無が異なる)


上記の手順で、ページ制作のベースは整いました。ここからは作成するコンテンツに応じて、最適なブロックを挿入し編集していく手順となります。編集できるブロックの種類は大きく以下6つのパターンに分類できます。

イメージ

画像やビデオ設置、ギャラリーなどが作成可能です。

テキスト・記事

テキスト中心の構成。イメージ+画像のパターンも豊富にあります。

表・テーブル

テーブル表や価格表、時間表記などが利用可能です。

MobiriseのBootstrapブロック

グラフ

進行度を示すプログレスをパイチャートで、%表記の棒グラフなど美しく表現できます。

フォーム

ページ上に簡単にフォーム設置が可能です。

アコーディオン・タブ

FAQなどに最適なアコーディオンや情報の格納に便利なタブ表示など。

ブロックの追加

作成したいコンテンツのイメージに近いブロックをボディ部分(メインイメージとフッターの間)に配置していきましょう。

コンテンツのイメージに近いブロックをボディ部分(メインイメージとフッターの間)に配置
1

記事系ならArticleを選択

文章を中心とした記事を書くのであればArticleを選択しましょう。もちろん画像を併用して華やかなリスティングに彩ることも可能です。

2

ソフト上で直接テキストを変更

サンプルの英字テキストが入っていますのでダブルクリックし変更します。テキストは太字イタリックなどの装飾が可能です。部分的にリンクを張ることもできます。

3

文字サイズ・位置の調整

テキストを全体選択ではなく、文字と文字の間を選択すると文字のカラー変更やサイズの変更が可能です。右寄せセンタリングなどAlignも調整できます。

テキストのスタイル指定について

テキストサイズはペンアイコンをクリックすることで調整できます。フォントのサイズ指定が自由に行えます。

Mobirise

画像イメージの配置

画像やビデオの配置が簡単に行えるimagesブロック

PC内から画像をアップ

使いたいイメージがすでにPC内にある場合、Browse Computerから画像をアップロードしましょう。アップした画像はソフトウェア内のSite Libraryに保存されます。

画像シェアサイト利用

画像の無料ダウンロードサイトPixabay.comと連携しています。ソフト内で好きなキーワードから著作権フリーの画像ライブラリを利用できます。ただし英語で検索するようにしましょう。

画像編集ソフトも不要

選択した画像のトリミングや縮尺率の変更(16:9など)もソフト内で行えますのでPhotoshop等のソフトウェアも不要です。オリジナルの画像はソフトに残らず編集後の画像が保存されます。

Mobirise

動画の埋め込み

YouTube,VImeoのURLを貼り付けるだけでサイトに動画の埋め込みが可能となります

1

ビデオURLの入力

YouTubeまたはVimeoのURLを入力します。

2

アスペクト比の設定

標準画面かワイド画面かの選択を行います。

3

自動再生、ループの設定

チェックボックスのON,OFFだけで動画再生
ルールの設定が簡単に行えます。


ブロックのバリエーション紹介

表の作成

簡単な作表ができるブロックも無料で利用可能です。

コードエディター

¥7600

簡単にブロックのコード編集ができるエディターです。

カスタムHTML

¥7600

好きな場所に自由記述できるHTMLブロックです。

レイジーロード

¥4400

読み込みの遅いCSSを最適化しコンテンツ表示を速めます。

プログレスバー・グラフ

グラフも簡単に作成可能

進行度や意向、スキル等をカンタンに表現できる、プログレスバー。これもブロックの配置で瞬時に行えます。
無料版では5つのバーを設定可能。チャート図等のイメージに使えるパイチャートまで無料で設置できます。
これらをコーディングするとコード編集で時間がかかりますが、モビライズならドラッグ&ドロップで完結です。

アメニティーに期待

%

公共交通機関                             

%

ナイトライフに期待

%

安全性を評価

%

テーブルの設置

面倒なテーブルタグの記述も不要。列や行も自由に増やせるテーブル表が簡単に設置できます。

名称発売日 価格 寸法 mm 取引
商品A2019/3/1¥7,800W40×D55×H6050社
商品B2018/4/11¥9,800W80×D35×H4033社
商品C2017/6/12¥1,2000W45×D95×H5065社
商品D2014/10/1¥8,800W48×D75×H2058社

お問い合わせフォーム

このような印象的なフォームもページ内のどこにでも設置が可能です。

価格表サンプルA

¥100,000

月額

  • ブランド
  • コンセプト
  • 設計


価格表サンプルB

¥150,000

月額

  • ブランド
  • コンセプト
  • 設計
  • マーケティング支援

価格表サンプルC

¥250,000

月額

  • ブランド
  • コンセプト
  • 設計
  • マーケティング支援
  • 構築

カウントダウンブロック

ティザーサイトなどで使えるカウントダウンタイマーも簡単に設置できます。JavaScriptの設置等は不要でこちらも無料で利用可能です。

東京オリンピック2020 開催まであと

Tokyo Olympic2020  -  2020/7/24(金) 開会式

カウンターメディア

実績等数字を強調したい場合には、アニメーション数字が効果的です。無料で利用可能です。

100

ヶ国に当社製品を出荷しています。

200

拠点の支社、営業所から迅速配達。

300

社を超える代理店がサポートします。

400

(K)台をこれまで過去10年間で出荷して来ました。

Bootstrapのブロック概要や種類が理解できたところで、ページの複製やスタイルの調整について設定法を見ていきましょう。