初めての Web ページ作成レポート

1. 初めてのWebページ作成レポート ホームページ初心者による 社内ホームページ作成までの道のり Dreamweaber ? HomePage Bilder? 1

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

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

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

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

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

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

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

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

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