Presentation is loading. Please wait.

Presentation is loading. Please wait.

HomePage Bilder? Dreamweaber ? 1. ホームページ作成経験ゼロ、 HTML 知識ゼロの私が社内ホームページ作りにチャレ ンジしました!といってももちろんいきなり一人では雲をつかむようなお話です。そ こで、知識豊富なアドバイザーのもと、ツール選びからスタートしました☆ まずは.

Similar presentations


Presentation on theme: "HomePage Bilder? Dreamweaber ? 1. ホームページ作成経験ゼロ、 HTML 知識ゼロの私が社内ホームページ作りにチャレ ンジしました!といってももちろんいきなり一人では雲をつかむようなお話です。そ こで、知識豊富なアドバイザーのもと、ツール選びからスタートしました☆ まずは."— Presentation transcript:

1 HomePage Bilder? Dreamweaber ? 1

2 ホームページ作成経験ゼロ、 HTML 知識ゼロの私が社内ホームページ作りにチャレ ンジしました!といってももちろんいきなり一人では雲をつかむようなお話です。そ こで、知識豊富なアドバイザーのもと、ツール選びからスタートしました☆ まずは Web 作成ツールを選ぼう! さて、まずはツール選びです。 R さんは今までに Photoshop や、イラ ストレーターなど、アドビのソフトを お使いになったことはありますか? あどび?ないです。。 ワードアートや、パワーポイントなら 少し使用したことはあります^^ PowerPoint ? 製作者: R アドバイザー: A マイクロソフトのオフィス製品に慣れ ていらっしゃるのですね。 それなら、 Dreamweaver は業界標準といわれてい ますが、ホームページビルダーのほう がオフィス製品に近いオペレーション ですから、そのほうが使いやすいかも しれませんね。 ん~。。確かに、 Dreamweaver とい うソフトの説明書を本屋さんで見たら 難しそうです>< ホームページビル ダーならなんとか操作できるかも! Dreamweaber ? ⇒ホームページビルダーに決定!! 2

3 アプリケーションのインストール アプリケーションに慣れる オフィスらしい色調や RBG について 3 製作者: R 新しいアプリケーションを入れると、 パソコンが重くなるって聞いた事があ るけど、だいじょうぶかな~? 製作者: R 色を使った書類を作るときに、 多色使いすると、どうも派手気 味になって、ダサく感じること があります。色って、どんな風 に決めると落ち着いた感じにな るのでしょうか・・・? 製作者: R ホームページビルダー到着!付属 CD を 使ってインストール完了 ♪ ナビつきで簡 単にインストールできました ♪ 製作者: R ワードなどとツールバーは似ているみ たいですね。いじってみればだいたい の操作はわかりそうです! そうですね。では PC メモ リを増やしましょう。 アドバイザー: A まずはテンプレートを使って簡単なペー ジを作ってみましょう。 アドバイザー: A 彩度を下げるとオフィスユーズらしい落 ちついた感じになりますよ。色は R (赤) G (緑) B (青)の数値の指定でも決められます が、 HSL という基準の中で S (彩度)の 数値を下げると落ち着いた感じになりま す。 まずはテンプレートを使って簡単なペー ジを作ってみましょう。 アドバイザー: A なるほど! ほんとですね!

4 社内ホームページの作成開始! 1)まずは構成と記事の分類を決め る 営業部 製造部 人事部 総務部 就業に関す るお知らせ 申請について 各種変更届 について 2)構成図の第一階層に沿って TOP を作成 カテゴリ B カテゴリ A <階層図> ページ作成のため の地図みたいなも のを事前に作りま した! 表にまとめました! 4 製作者: R まずは社内の各部署のメンバーにヒアリング。各部署ごとの ページを作り、それぞれのページの中でさらに文書をカテゴ リ別に分類・累積することにしました。社内イントラのお知 らせでは流れてしまう文書も、これで探しやすくなるはず^ ^ 製作者: R TOP 1ページのこの段階では普通の動かない絵。ここまでは ボタン作成なども、ワードアート感覚で出来ました^^! すばらしいです!このように「文字情報の入った絵」的なページを いくつも作って、リンクという機能を使ってそれぞれを繋いでゆき ましょう。 アドバイザー: A

5 3)部署別ページ(第二階層)を作 る 4)カテゴリ別累積ページ(第三階層)を 作る 5 製作者: R 最初はバランスが上手く取れなかったけれど、 枠なしの表を組み込むことで解決!レイアウ トに均整が取れるようになりました^^! 製作者: R 見た目は同じに見える部分でも、製作している ページは別ページなので、共通部分を動かさな いように気をつけるのは大変でした;; 第二階層の1ページが完成すれば、それをベースに 平行した他のページも色や文字を変更して作ってゆ きましょう。 アドバイザー: A 各カテゴリのページに移動するときなど、レイ アウト上は前のページと重なる表示があります が、その部分はなるべく動かないように作って みましょう。 アドバイ ザー: A

6 社内プレゼン! 階層図などに 基づいてご説 明しました。 アドバイザーに助けて いただいて社内ホーム ページが完成しました ^^ 今日は社内プレゼンの 日です☆ 製作者: R たとえば、相手に喜んで もらえるプレゼントとは、自分 が その人に似合うと思うものより も、相手の人がいつも身につけ ているもの、持っているものに 近いものを選ぶと喜ばれるので す。そういった視点から「色」 について 意識してみましょう。 社 長 社 長 黄金比というのを ご存知でしょうか?書 類がきれいに見える (人の心理として落ち 着く)縦横比が A 4の紙 などですね。それを意 識してみましょう。 6 製作者: R 社内の皆さんのアドバイスもいただき、もう一回チャレン ジ!!

7 社内ホームページ Ver 2 作成開始! 1)色・デザインをかっこよくしてみよ う! がんばるぞ!! 7 製作者: R ◆上部の部署別ボタンは光るようなデザインにしたい!どうすれば光っているように見えるんだ ろう?? ◆色は会社のイメージカラーをベースにしてみよう! ◆やっぱり背景は白が映える! ◆バランスって難しいけど、まずは左寄せにしてみようかな。 ⇒ 文書累積に重点があるとはいえ、カッコイイホームページ目指してもう一回チャレン ジ!! ⇒ 文書累積に重点があるとはいえ、カッコイイホームページ目指してもう一回チャレン ジ!! 製作者: R すごい!だいぶかっこよくなりました!(?) でも、これではまだまだバランスがよくないか も・・・

8 そうですね!見せ方を変えてみました! 製作者: R 2)表示項目を変えてみよう! 「新着」と「重要」のタイトルバーのデザインをいろいろと 変えてみました!試行錯誤してやっとしっくりくるものになり ました。 1)同じ色で塗りつぶし ⇒2)同じ写真 ⇒3)違う写真 ⇒4)同じ写真の分割上下でシリーズっぽく 製作者: R 記事の中身を開かなくても内容の一部がわかると忙し い人たちには便利ですね。 アドバイザー: A 3)バーのデザインをきれいにしてみよ う! 8 写真を加工して入れてみました^ ^!

9 4)オリジナルページを作成 5)記事を入れる 9 製作者: R 各部署からの文書以外にも、社長のエッセイや お話をまとめてオリジナルなページを作ってみ ました。社是社訓などのページも作りました。 製作者: R 各部署ごとに記事の雛形を作り、そこに今ある 記事を入れてみました。今後は中身の文章だけ 入れ替えればどんどん記事が入れられます! それぞれの会社でオリジナルなページが自由 に作れるのも自作ならではのメリットですね。 アドバイ ザー: A 記事のフォントや行間など、見た目に統一感 が出るように共通の「決め事」を作っておく といいかもしれませんね。 アドバイ ザー: A

10 10 社内ホームページ Ver 2 完成! 製作者: R ◆やっぱり背景は白が映えました! ◆ボタンも光る感じになりました!⇒マウスが上に来るとさらに光る機能も追加! ◆色は会社の基本カラーをベースにしました! ⇒なかなかカッコよくなったと思います!見た目がスッキリすると、ページにも親しみや すく 利用度も上がるようです。 がんばったぞ!! 製作者: R 研究を重ねた結果、ボタンも光りました^^! きれいに見せる作業も楽しかったです^^ Ver.1 Ver.2


Download ppt "HomePage Bilder? Dreamweaber ? 1. ホームページ作成経験ゼロ、 HTML 知識ゼロの私が社内ホームページ作りにチャレ ンジしました!といってももちろんいきなり一人では雲をつかむようなお話です。そ こで、知識豊富なアドバイザーのもと、ツール選びからスタートしました☆ まずは."

Similar presentations


Ads by Google