HomePage Bilder? Dreamweaber ? 1

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

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

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

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

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

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

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

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

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