HomePage Bilder?

HomePage Bilder?

Dreamweaber ?

Dreamweaber ?

1

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

まずはWeb作成ツールを選ぼう！

さて、まずはツール選びです。さて、まずはツール選びです。RR さんは今までにさんは今までに PhotoshopPhotoshop や、や、

イラストレーターイラストレーターなど、など、アドビのソアドビのソフトフトをお使いになったことはありまをお使いになったことはありま

すか？すか？

さて、まずはツール選びです。さて、まずはツール選びです。RR さんは今までにさんは今までに PhotoshopPhotoshop や、や、

イラストレーターイラストレーターなど、など、アドビのソアドビのソフトフトをお使いになったことはありまをお使いになったことはありま

すか？すか？

あどび？ないです。。あどび？ないです。。ワードアートワードアートや、や、パワーポイントパワーポイント

ならなら少し使用したことはあります＾＾少し使用したことはあります＾＾

あどび？ないです。。あどび？ないです。。ワードアートワードアートや、や、パワーポイントパワーポイント

ならなら少し使用したことはあります＾＾少し使用したことはあります＾＾

PowerPoint ? 製作者：製作者： RRアドバイザー：アドバイザー： AA

マイクロソフトのマイクロソフトのオフィス製品オフィス製品に慣れに慣れていらっしゃるのですね。　それなら、ていらっしゃるのですね。　それなら、DreamweaverDreamweaver は業界標準といわれは業界標準といわれていますが、ていますが、ホームページビルダーホームページビルダーののほうがオフィス製品に近いオペレーシほうがオフィス製品に近いオペレーションですから、そのほうが使いやすいョンですから、そのほうが使いやすいかもしれませんね。かもしれませんね。

マイクロソフトのマイクロソフトのオフィス製品オフィス製品に慣れに慣れていらっしゃるのですね。　それなら、ていらっしゃるのですね。　それなら、DreamweaverDreamweaver は業界標準といわれは業界標準といわれていますが、ていますが、ホームページビルダーホームページビルダーののほうがオフィス製品に近いオペレーシほうがオフィス製品に近いオペレーションですから、そのほうが使いやすいョンですから、そのほうが使いやすいかもしれませんね。かもしれませんね。

ん～。。確かに、 ん～。。確かに、 DreamweaverDreamweaver とというソフトの説明書を本屋さんでいうソフトの説明書を本屋さんで見たら難しそうです＞＜　ホーム見たら難しそうです＞＜　ホームページビルダーならなんとか操作ページビルダーならなんとか操作

できるかも！できるかも！

ん～。。確かに、 ん～。。確かに、 DreamweaverDreamweaver とというソフトの説明書を本屋さんでいうソフトの説明書を本屋さんで見たら難しそうです＞＜　ホーム見たら難しそうです＞＜　ホームページビルダーならなんとか操作ページビルダーならなんとか操作

できるかも！できるかも！

Dreamweaber ?

⇒ホームページビルダーに決定！！2

アプリケーションのインストール

アプリケーションに慣れる

オフィスらしい色調や RBGについて

3

製作者：製作者： RR

新しいアプリケーションを入れると、パソコンが重くなるって聞いた事があるけど、だいじょうぶかな～？

製作者：製作者：RR

色を使った書類を作るときに、多色使いすると、どうも派手気味になって、ダサく感じることがあります。色って、どんな風に決めると落ち着いた感じになるのでしょうか・・・？

製作者：製作者： RR

ホームページビルダー到着！付属 CDを使ってインストール完了♪ナビつきで簡単にインストールできました♪

製作者：製作者： RR

ワードなどとツールバーは似ているみたいですね。いじってみればだいたいの操作はわかりそうです！

そうですね。では PCメモリを増やしましょう。

アドバイザー：アドバイザー： AA

まずはテンプレートを使って簡単なページを作ってみましょう。

アドバイザー：アドバイザー：AA

彩度を下げるとオフィスユーズらしい落ちついた感じになりますよ。色は R（赤） G（緑） B（青）の数値の指定でも決められますが、 HSLという基準の中で S（彩度）の数値を下げると落ち着いた感じになります。まずはテンプレートを使って簡単なページを作ってみましょう。

アドバイザー：アドバイザー：AA

なるほど！

ほんとですね！

社内ホームページの作成開始！

１）まずは構成と記事の分類を決める

営業部

製造部

人事部

総務部

就業に関するお知らせ

申請について各種変更届について

２）構成図の第一階層に沿って TOPを作成

カテゴリ B

カテゴリ A

＜階層図＞　　　＜階層図＞　　　　　　　　　　　ページ作ページ作成のための地図み成のための地図みたいなものを事前たいなものを事前に作りました！に作りました！

表にまとめました！

4

製作者：製作者： RR

まずは社内の各部署のメンバーにヒアリング。各部署ごとのページを作り、それぞれのページの中でさらに文書をカテゴリ別に分類・累積することにしました。社内イントラのお知らせでは流れてしまう文書も、これで探しやすくなるはず＾＾

製作者：製作者：RR

TOP１ページのこの段階では普通の動かない絵。ここまではボタン作成なども、ワードアート感覚で出来ました＾＾！

すばらしいです！このように「文字情報の入った絵」的なページをいくつも作って、リンクという機能を使ってそれぞれを繋いでゆきましょう。 アドバイザー：アドバイザー： AA

３）部署別ページ（第二階層）を作る

４）カテゴリ別累積ページ（第三階層）を作る

5

製作者：製作者： RR

最初はバランスが上手く取れなかったけれど、枠なしの表を組み込むことで解決！レイアウトに均整が取れるようになりました＾＾！

製作者：製作者： RR

見た目は同じに見える部分でも、製作しているページは別ページなので、共通部分を動かさないように気をつけるのは大変でした；；

第二階層の１ページが完成すれば、それをベースに平行した他のページも色や文字を変更して作ってゆきましょう。 アドバイザー：アドバイザー：

AA

各カテゴリのページに移動するときなど、レイアウト上は前のページと重なる表示がありますが、その部分はなるべく動かないように作ってみましょう。 アドバイザー：アドバイザー：

AA

社内プレゼン！

階層図などに基づいてご説明しました。　　　　　　　　　　　　

　　

アドバイザーに助けていただいて社内ホームページが完成しました

＾＾今日は社内プレゼンの

日です☆製作者：製作者： RR

たとえば、相手に喜んでもらえるプレゼントとは、自分

がその人に似合うと思うものよりも、相手の人がいつも身につけているもの、持っているものに近いものを選ぶと喜ばれるのです。そういった視点から「色」

について意識してみましょう。

社　長社　長

社　長社　長

黄金比というのをご存知でしょうか？書類がきれいに見える（人の心理として落ち着く）縦横比が A ４の紙などですね。それを意識してみましょう。

6

製作者：製作者： RR社内の皆さんのアドバイスもいただき、もう一回チャレン

ジ！！

社内ホームページ Ver２　作成開始！

１）色・デザインをかっこよくしてみよう！がんばるぞ！！

7

製作者：製作者：RR

◆上部の部署別ボタンは光るようなデザインにしたい！どうすれば光っているように見えるんだろう？？◆色は会社のイメージカラーをベースにしてみよう！◆やっぱり背景は白が映える！　◆バランスって難しいけど、まずは左寄せにしてみようかな。　

　　⇒ 　　⇒ 文書累積に重点があるとはいえ、カッコイイホームページ目指してもう一回チャレンジ！！文書累積に重点があるとはいえ、カッコイイホームページ目指してもう一回チャレンジ！！

製作者：製作者：RR

すごい！だいぶかっこよくなりました！（？）でも、これではまだまだバランスがよくないかも・・・

そうですね！そうですね！見せ方を変えてみました！見せ方を変えてみました！そうですね！そうですね！見せ方を変えてみました！見せ方を変えてみました！

製作者：製作者： RR

２）表示項目を変えてみよう！

「新着」と「重要」のタイトルバーのデザインをいろいろ「新着」と「重要」のタイトルバーのデザインをいろいろとと変えてみました！試行錯誤してやっとしっくりくるものに変えてみました！試行錯誤してやっとしっくりくるものになりました。なりました。　

　 １）同じ色で塗りつぶし ⇒ ２）同じ写真 ⇒ ３）違う写真 ⇒ ４）同じ写真の分割上下でシリーズっぽく

「新着」と「重要」のタイトルバーのデザインをいろいろ「新着」と「重要」のタイトルバーのデザインをいろいろとと変えてみました！試行錯誤してやっとしっくりくるものに変えてみました！試行錯誤してやっとしっくりくるものになりました。なりました。　

　 １）同じ色で塗りつぶし ⇒ ２）同じ写真 ⇒ ３）違う写真 ⇒ ４）同じ写真の分割上下でシリーズっぽく

製作者：製作者：RR

記事の中身を開かなくても内容の一部がわかると記事の中身を開かなくても内容の一部がわかると忙しい人たちには便利ですね。忙しい人たちには便利ですね。記事の中身を開かなくても内容の一部がわかると記事の中身を開かなくても内容の一部がわかると忙しい人たちには便利ですね。忙しい人たちには便利ですね。 アドバイザー：アドバイザー：

AA

３）バーのデザインをきれいにしてみよう！

8

写真を加工して入れてみました＾＾！

４）オリジナルページを作成

５）記事を入れる

9

製作者：製作者： RR

各部署からの文書以外にも、社長のエッセイやお話をまとめてオリジナルなページを作ってみました。社是社訓などのページも作りました。

製作者：製作者： RR

各部署ごとに記事の雛形を作り、そこに今ある記事を入れてみました。今後は中身の文章だけ入れ替えればどんどん記事が入れられます！

それぞれの会社でオリジナルなページが自由に作れるのも自作ならではのメリットですね。

アドバイザー：アドバイザー：AA

記事のフォントや行間など、見た目に統一感が出るように共通の「決め事」を作っておくといいかもしれませんね。 アドバイザー：アドバイザー：

AA

10

社内ホームページ Ver２　完成！

製作者：製作者： RR

◆やっぱり背景は白が映えました！◆ボタンも光る感じになりました！⇒マウスが上に来るとさらに光る機能も追加！◆色は会社の基本カラーをベースにしました！⇒ なかなかカッコよくなったと思います！見た目がスッキリすると、ページにも親しみやすく　 利用度も上がるようです。

がんばったぞ！！

製作者：製作者： RR

研究を重ねた結果、ボタンも光りました＾＾！きれいに見せる作業も楽しかったです＾＾

Ver.1Ver.2