Weeblyの教科書
  • ホーム
    • セミナー情報 >
      • Weebly Lesson 1
      • Weebly Lesson 2
      • 3時間で学ぶHTML >
        • テキストダウンロード
    • Weeblyを始めよう!
    • 新着情報
    • 管理人日誌
    • このHPについて >
      • 役立つHPの作り方
      • これからのHPとは? >
        • 事業に役立つHPの作り方
        • こんなCMSは利用するな!
      • weeblyの特長 >
        • Weeblyの特長
        • 他のCMSとの比較
        • Weeblyの有料プラン紹介
        • Weeblyをおすすめしない方
        • Weeblyのおすすめする理由 >
          • 特長01 ドラッグ&ドロップで簡単編集
          • 特長02 100種類以上の豊富なデザイン
          • 特長03 強力なホスティング
          • 特長04 迅速で役立つサポート
          • 特長05 簡単なブログ設置&投稿
          • 特長06 優れた画像編集機能
          • 特長07 優れた画像設置・編集機能
          • 特長08 簡単なビデオ、オーディオ配置
          • 特長09 フォームも簡単設置&高度な編集機能
          • 特長10 詳細なトラフィック統計情報が確認できる
          • 特長11 独自ドメインホスティング
          • 特長12 無料版でも広告表示なし
          • 特長13 スマホ、タブレットから編集できる専用アプリ登場!
          • 特長14 さらなる高機能なツールが続々登場!
  • サイトを作ってみよう!
    • はじめに >
      • 構成を考えよう!
      • 素材を用意しよう!
      • Step 01 登録&スタート >
        • コラム・ドメインについて
      • Step 02 サイト設定
      • Step 03 サイトの管理画面
      • Step 04 編集操作画面
      • Step 05 編集操作の基礎知識
    • サイト作成・編集 >
      • 編集操作項目一覧
      • デザインテーマの変更
      • ページの追加・削除
      • 画像と文字の配置・編集
      • ギャラリーの配置・設定
      • スライドの配置・設定
      • HD動画・YouTube動画の配置と設定
      • 地図(Google Map)の配置・設定
    • SEO設定について
  • 逆引き
  • 機能を拡張しよう!
  • Q&A
  • お問合わせ
  • Weeblyで制作したHP事例

芸能人は「歯」が命
って言うぐらい、サイトには
「素材」が命です。

文章だらけのサイトは好きですか?
よほど知りたい情報が掲載されていないかぎり、検索で文字だらけのページが出てきたら
もっと分かりやすく図や画像付きで解説しているページの方が見たくなりますよね。
ホーム > サイトを作ってみよう! > 素材を用意しよう!



Preparation

まずは、Weeblyにアクセスしてサイトを作成するための準備として、素材を用意しましょう。

Picture
ページの構成を考えたら、それぞれのページの内容の原稿と、画像や説明図等の準備をしましょう。

手書きでも良いので、各ページの内容を少しずつまとめていきます。

実際の原稿はテキストで作成しておいても良いですし、Weeblyにアクセスしてから考えながら直接文章を入力しても良いのです。

準備すべき画像の種類はいろいろ。

Picture

説明画像

フォトライブラリーや、自分で撮影した画像データなどから使用可能な画像をフォルダーにまとめておきましょう。
Picture

イメージ画像

Weeblyには無料で利用可能な画像検索機能があります。クレジットがサイトに掲載されますが、無料で検索・利用できます。
Picture

説明図

商品説明やサービスの解説等で画像があると伝わりやすくなります。企画書やプレゼン資料から画像を用意しておきましょう。
Picture

商品画像

実際に販売する商品の画像やサービスマークなどの画像は必ず必要になりますので、きちんと撮影した画像を用意しておきましょう。

Weeblyでは、画像のサイズ加工についてはあまり気にする必要はありません。

最近の一般的なデジカメまたはスマートフォンも高解像度の画像が撮影出来ます。おおよそ幅として1000px以上の画像であれば綺麗に表示させることが可能です。


画像の配置方法は別途案内ページでご案内致しますが、好きなサイズにサイト内で調整が可能です。また、トリミングと言って、画像の一部を切り取るような形で画像を見せることもできます。


細かな画像の切抜き加工はできませんが、今までサイトに画像をアップする際に、サイズを気にしていた面倒くささがWeeblyでは無くなり、簡単に画像を好きな場所に配置できます。



画像やイラストは"著作権"に注意しましょう。

他人が撮影した画像や芸能人の写真、漫画やアニメの画像を無断でサイトに使用したらその時点でアウト。著作権違反です。

著作権違反でGoogleに申告されるとそのサイトは検索から除外されてしまいます。

一度除外されたサイトが検索でヒットするうようになるにはGoogleに申請してもなかなか元に戻らないようです。

事業で個人でPRしたいものや商売上重要なサイトでは絶対にやってはいけないのがこの"著作権違反"です。

自分で描いた説明図や、自分で撮影した写真を使うか、販売されている著作権フリーの画像集や有料で画像を購入する方法で素材を準備しましょう。

Weeblyでは有料と無料で使える画像を検索して利用することができます。

無料はクリエイティブ・コモンズと言って著作者の表示がサイトのフッターに掲載されることで使用できる画像です。
有料版も画像1点が$5支払う(クレジットカード支払い)と利用できます。

無料版も上手に活用すればサイトに華を添えられます。画像の配置についての説明はこちらで詳しく案内しています。
登録・スタートへ

セミナー開催のお知らせ 開催場所:東京 新宿駅から京王線で桜上水駅下車 徒歩7分

最新のスケジュール公開中! 受講お待ちしております。
セミナー情報・お申込み
セミナー情報・お申込み
セミナー情報・お申込み
セミナー情報・お申込み

Weeblyをすぐ始める

Weebly.comを今すぐ始めたい方は、
Weeblyのバナーをクリック ▶▶▶

登録からサイトOPENまで ▶
Create your online store and start selling. Try it free at Weebly.com!
The Easiest Way to Create a Website. Weebly.com

サイトマップ

ホーム
このHPについて
├ HPの作り方無料プレゼントのご案内
└ これからのHPとは?
    ├ 役立つHPの作り方
    ├ 事業に役立つHPの作り方
    └
こんなCMSは利用するな
└ Weebly.comの特長
    ├ 他のCMSとの比較
    ├ Weeblyの有料プラン紹介
    ├ Weeblyをオススメしない場合
    └ Weeblyをオススメする理由
└ Weeblyの特長の詳細 
 ├ ドラッグ&ドロップで作成
    ├ 豊富なデザイン
    ├ 強力なホスティング
    ├ 迅速で役立つサポート
    ├ 簡単ブログ配置&編集
    ├ 優れた画像設置・編集機能      
    ├ 簡単なビデオ,オーディオ配置
    ├ フォームも簡単配置・編集
    ├ トラフィック統計
    ├ 独自ドメインホスティング
    ├ 無料版でも広告なし
    └さらなる様々な機能
└  こんなHPが作れます!
サイトを作ってみよう!
├ サイトの構成を考えよう!
├ 素材を用意しよう!
└ Step01登録&スタート
    ├ デザインの選択
    ├ ドメインの設定
└ Step02 サイトの設定
└ Step03 サイトの管理画面
└ Step04 サイトの編集操作画面
└ Step05 サイトの編集操作の基礎知識

└ サイト作成・編集
    ├ ページの追加・編集
    └ タイトルを横長のロゴ画像に変更
    └ ブログページの追加・編集
       └ SNSと連携設定
    ├ 画像と文字の配置・編集
    ├ 複数の画像をポートフォリオ表示

    ├ 複数の画像をスライド表示
    ├ 動画の配置
    ├ リンクボタンの配置
    ├ Google Adsenseの配置
    ├ Google Mapの設置
    ├ ブログ一覧(RSS FEED)の設置
    ├ お問合せフォームの設置・編集
    ├ アンケートの設置・編集
    ├ Googleカレンダーの設置
    ├ オリジナルHTMLコードの設置
    ├ ページ内検索BOXの配置
    └ ダウンロード書類の配置
└ SEO対策の設定 
機能を拡張しよう!
├ Facebook「いいね!」boxの設置
├ Fecebook Recommend Boxの設置
└ Twitter連携BOXの設置

Q&A

カスタマイズ(有料会員専用)
├ RSS FEEDの設定&カスタマイズ
├ カスタムHTMLの設定
├ CSS3を活用した設定
├ デザインのカスタマイズ
├ ナビのカスタマイズ
└ フッターのカスタマイズ
└ Google Analitycsの設置
└ Google Webmasterコードの設置

お問合せ
└ 有料サポートのご案内

管理人プロフィール

2012- Copyright © Weeblyの教科書. All Rights Reserved

  • ホーム
    • セミナー情報 >
      • Weebly Lesson 1
      • Weebly Lesson 2
      • 3時間で学ぶHTML >
        • テキストダウンロード
    • Weeblyを始めよう!
    • 新着情報
    • 管理人日誌
    • このHPについて >
      • 役立つHPの作り方
      • これからのHPとは? >
        • 事業に役立つHPの作り方
        • こんなCMSは利用するな!
      • weeblyの特長 >
        • Weeblyの特長
        • 他のCMSとの比較
        • Weeblyの有料プラン紹介
        • Weeblyをおすすめしない方
        • Weeblyのおすすめする理由 >
          • 特長01 ドラッグ&ドロップで簡単編集
          • 特長02 100種類以上の豊富なデザイン
          • 特長03 強力なホスティング
          • 特長04 迅速で役立つサポート
          • 特長05 簡単なブログ設置&投稿
          • 特長06 優れた画像編集機能
          • 特長07 優れた画像設置・編集機能
          • 特長08 簡単なビデオ、オーディオ配置
          • 特長09 フォームも簡単設置&高度な編集機能
          • 特長10 詳細なトラフィック統計情報が確認できる
          • 特長11 独自ドメインホスティング
          • 特長12 無料版でも広告表示なし
          • 特長13 スマホ、タブレットから編集できる専用アプリ登場!
          • 特長14 さらなる高機能なツールが続々登場!
  • サイトを作ってみよう!
    • はじめに >
      • 構成を考えよう!
      • 素材を用意しよう!
      • Step 01 登録&スタート >
        • コラム・ドメインについて
      • Step 02 サイト設定
      • Step 03 サイトの管理画面
      • Step 04 編集操作画面
      • Step 05 編集操作の基礎知識
    • サイト作成・編集 >
      • 編集操作項目一覧
      • デザインテーマの変更
      • ページの追加・削除
      • 画像と文字の配置・編集
      • ギャラリーの配置・設定
      • スライドの配置・設定
      • HD動画・YouTube動画の配置と設定
      • 地図(Google Map)の配置・設定
    • SEO設定について
  • 逆引き
  • 機能を拡張しよう!
  • Q&A
  • お問合わせ
  • Weeblyで制作したHP事例