はじめてのWebサイト作り「写真の撮り方 文章の書き方」

はじめてのWebサイト作り 写真の撮り方 文章の書き方 かやはら あやこ セミナー資料

セミナー目次 0.講師紹介 講師の仕事内容・活動など 1.はじめに Webサイトって何？どんな情報がどこまで必要？ 2.文章の書き方 Webサイトに必要な文章の書き方。よくいただくお悩み 3.ワーク 4.写真の撮り方 5.まとめ 実際に書き出してみましょう スキル無しで使える写真の撮り方のコツ 講座のまとめ

0.講師紹介 講師の仕事、活動など

講師紹介 フォトライターの かやはらあやこです 1978年生まれ、大阪府出身。 2021年春に約20年住んだ北九州市から 豊前市に移住したフリーランスフォトライターです。 講師紹介 1/4

豊前市での仕事 豊前市の観光やまちづくりのPR 豊前観光まちづくり協会公式note企画・制作 2024年度 豊前市PR動画制作 Webサイト「求菩提里山リトリート」 文章制作・写真撮影(※一部) 求人サイト「豊前しごと図鑑」(※一部) 2023年度「ぶぜん食と農の革新会議」 インスタグラム担当 講師紹介 2/4

豊前市外のWebメディアと仕事 豊前市外のWebメディアのライター 福岡県の移住促進Webメディア「福がお〜かくらし」 内「福岡くらしごと体験」(※豊前エリア) 大分県中津市のWebメディア「ジモッシュ！Web」 ー（※ハンドル名「ぶぜんノート」） 講師紹介 3/4

移住元との仕事 御縁が続き北九州市の会社とコラボして ジンドゥーをベースにしたHP制作 北九州市の㈱VIコンサルティングとコラボして、 コストを抑え自走可能なホームページ制作 「ワラルー」を提供。 講師紹介 4/4

1.Webサイトって何？ どんな情報がどこまで必要？

1.Webサイトって何？ Webサイトって「何」でしょう？ Webサイトの文章の書き方、写真の撮り方をお伝えする前に まずは「Webサイトとは何か」についてお伝えします 1/15

1.Webサイトって何？ 2/15 パン屋 です 誰かに伝えたいことを伝えるためのもの Webサイトは、誰かに伝えるための手段のひとつ

1.Webサイトって何？ 3/15 ◯◯ ◯◯パン パン 皆さんが既に使っている「伝える」ツール チラシや名刺

1.Webサイトって何？ 4/15 ◯◯パン Webサイト＝デジタルチラシ/名刺 紙媒体のチラシや名刺をWeb上に現したもの

1.Webサイトって何？ 5/15 写真 イラストなど 文章 ネット空間にあるチラシ 24時間いつでも見てもらえるネット上の『チラシ』

1.Webサイトって何？ 6/15 写真 営業時間 料金 イラスト メニュー Webサイト、イコール “デジタルチラシ” チラシ＝伝えたいことを伝えるために必要最低限の要素 地図

1.Webサイトって何？ 7/15 情報量は チラシより 制限が少ない Webサイトに必要最低限の情報＝チラシ まとまって、わかりやすいことが重要

1.Webサイトって何？ チラシには無いけど Webサイトには ブログがありますよね？ 8/15

1.Webサイトって何？ Webサイト チラシ 9/15 日報 ブログ Webサイトとブログは役割が違う チラシが基本情報で、ブログは最新情報。(予約やカートのように追加機能)

1.Webサイトって何？ Webサイトには どんな写真や文章が 必要なの？ 10/15

1.Webサイトって何？ 実物 11/15 Webサイト 実物の情報をプラスマイナスゼロで表現 実物と大きく違ってはいけない

1.Webサイトって何？ 実物よりWebのほうが良すぎると… 期待はずれでがっかり→低評価レビューにつながる 12/15

1.Webサイトって何？ 実物よりWebのほうが悪すぎても… 選んでもらえない 13/15

1.Webサイトって何？ 臨時休業日や営業時間が誤っていたら 「せっかく行ったのに！」 14/15

1.Webサイトって何？まとめ Webサイトの役割は デジタル上に置くチラシ。 基本となる情報の要素は チラシと同じ。 プラスマイナスゼロで 正しく表現。 15/15

2.文章の書き方 Webサイトに必要な文章の書き方

2.文章の書き方 まず準備するものはペンと紙(メモツール) 「伝えたいこと」は文章だけでも表現できる 1/22

2.文章の書き方 2/22 伝えるために最低限必要な要素は文章 グラフィックがなくても伝えられる

2.文章の書き方 写真は補足や証明に使うもの 伝えるために、目を惹くために大事な要素ではありますが… 3/22

2.文章の書き方 4/22

2.文章の書き方 5/22 “御神木の楠の根元から 湧き出る名水で抽出した オリジナルブレンド珈琲”

2.文章の書き方 6/22 “御神木の楠の根元から 湧き出る名水で抽出した オリジナルブレンド珈琲”

2.文章の書き方 7/22 “御神木の楠の根元から湧き出る名水で 抽出したオリジナルブレンド珈琲“

2.文章の書き方 文章に写真を加えたら伝えやすい 写真＝文章の補足や証明。伝えたいことはまず文章。 8/22

2.文章の書き方 文章だけなら修正もラク グラフィックと一緒に考えると手直しの手間が増えます 9/22

2.文章の書き方 文章が書きやすくなる コツが知りたい 10/22

2.文章の書き方 まずは話し言葉で書いてみる 最初から文章を整える必要はありません。 大切なことは自分のなかでイメージができているかどうか。 綺麗で正確な文章でなくて大丈夫です。 11/22

2.文章の書き方 伝えたい(伝えるべき)ことを 伝えたい相手目線になって書きます 特定の誰かを頭に浮かべて書くお手紙のつもりで。 例えばこのスライドは… 12/22

2.文章の書き方 伝えたい(伝えるべき)ことが分からないなら 同業他社のサイトを参考に ゼロから自分で考えるのは大変。chatGPTなどのAIツールを使ってもよい。 13/22

2.文章の書き方 14/22 完璧でなくてよい フォトライターの自分でも 何度も何度も文章を書き直しています。 ざっくり書いて、違和感を直していくイメージだと書きやすくなります。

2.文章の書き方 強みや特徴は第三者の言葉から 誰でも自分のことはよく分からないもの。 アンケートや感想に 強みや特徴を書くためのヒントが現れます。 15/22

2.文章の書き方 ストーリーで 伝える方法とは？ 16/22

2.文章の書き方 選ばれるためにはストーリーが必要？ サービスや体験、選択肢が多い場合 ストーリーで伝えることが重要視されていますが… 17/22

2.文章の書き方 18/22 虎屋の羊羹のストーリー →羊羹が特に好きでもない自分が 食べたくなってしまった！

2.文章の書き方 19/22 どちらに行ってみたい？ たくさんの人に喜ばれる パン屋さんになりたいです。 子どもの頃、仕事が忙しかった親がたまに作っ てくれたパンの味。 パンが焼き上がった時に家族で歓声をあげたワ クワク感。 笑顔がこぼれるあの瞬間を多くの人に提供でき るような焼き立てパンのお店を開きました。

2.文章の書き方 ストーリーとは思いを伴った行動の積み重ね 人や企業の歴史をありのまま、つなぎ合わせる 20/22

2.文章の書き方 21/22 伝えるべきこと＋ストーリー 伝わるWebサイト

2.文章の書き方 まとめ 文章だけで「伝えたい」ことは 表現できます。 まずは文章だけで 必要なことを書き出します。 それからストーリーを加えたら より伝わるWebサイトに！ 22/22

3.ワーク あなたのWebサイトに必要な原稿を 書き出してみましょう

3.ワーク 1/7 おもて ② 全 記 ④ ② 必 て 入 ⑤ ③ 要 か の し ⑥ は な ら 項 て は 全 文 ウ 目 く セ 員 章 ェ を だ ミ 。 を ブ 埋 さ ナ 書 サ め い ー い イ な 。 の て ト み に 内 く て ま 容 し を も ょ 参 大 丈 う 考 夫 。 に で す 。 1 空けて おく うら 4 組織紹介 2 or 5 自己紹介 3 問合せ方法 6 空 け て お く

3.ワーク 2/7 おもて 書 ま 書 イ ど ① き た い ラ ん に 加 、 て ス な は え ③ み ト 写 ② て 以 く で 真 を み 下 だ も が 表 て の さ 言 よ す く 項 い 葉 い 写 だ 目 。 で で 真 さ に も し が い も ど ょ 入 ち う り 。 入 ら ？ ま れ で た す 。 い も 写 よ 真 い の を で うら 4 1 組織紹介 2 or 5 自己紹介 3 問合せ 方法 6

3.ワーク 3/7 こ 講 ん 師 な が 程 書 度 い で て 大 み 丈 ま 夫 し で た す ！ 。

3.ワーク 4/7 書きましたか？ お疲れさまでした！これで伝える土台ができました

3.ワーク 5/7 2人組になって 原稿を見せ アイデアや感想を 言い合ってみましょう

3.ワーク 6/7 たとえばこんなこと もっとここ教えて！知りたい！ こんな写真が見てみたい どんな写真なら伝わる？ ここがいいですね（感想)

3.ワーク まとめ 原稿は、まずはシンプルでOK。 ほかの人がもっと聞きたい 見たいと思うことが見つかれば 更に伝わるWebサイトにする ヒントになるはず。 7/7

4.写真の撮り方 スキル無しで使える写真の撮り方のコツ

4.写真の撮り方 1/15 ０ Webサイトに必要な写真って？ プラスマイナスゼロ。実物の魅力や情報を正しく(等しく)伝える写真

4.写真の撮り方 2/15 さらに伝わる写真とは 自然な笑顔の写真は、雰囲気が一目で伝わります 人間関係良好な職場 北九州から移住・異業種起業した漁師さん

4.写真の撮り方 3/15 スマホでも撮れます 極端に動きが速かったり、暗かったりすると綺麗に撮るのは難しいですが…

4.写真の撮り方 スマホで撮影した写真 4/15

4.写真の撮り方 5/15 避けたほうがよい撮り方・写真を知る まずはNGな写真を知って避ける

4.写真の撮り方 6/15 傾いた写真 特に建物を撮る時に 気になる傾き。 直線がある場合は注意 スマホカメラに「グリッド線」を表示させたり 撮れた写真をアプリで傾きを調整。 後で調整できるのでぜひ覚えておいてください

4.写真の撮り方 7/15 余分なものが目立つ写真 机の上のパソコンを撮りたいのに 周りはコップや書類、それに人の手 や腕でゴチャゴチャ… 何が主役なのかが わかりにくい状態です 撮りたいもの以外はどかせて見えないようにするか 写らない角度から撮影します。 撮る前の準備はとても大切です。

4.写真の撮り方 8/15 引きばかり撮影 イベント写真を撮影する時 様子を伝えたいからと 遠くからの距離ばかりで 撮ってしまいがち。 引きだけでなく、思い切って近づいて撮ってみましょう。 引きの写真があるからこそ、寄った写真も 際立つというもの。

4.写真の撮り方 9/15 日光が入らない屋内での撮影 日光が入ってこない屋内での撮影は 照明機材が無いと 綺麗に撮るのは難しいです。 日光が完全に無い場所であれば、アプリを利用して明る さや色味を調整してみましょう。 屋内でも窓から差し込む光があれば綺麗に写せます。

4.写真の撮り方 10/15 頭から首に背景の一部が 刺さっているように 見える構図 「串刺し」「目刺し」「首切り」 といって、人物写真では避けるべき 構図があります。 人物写真を撮る前は背景を確認して 頭から首にかけて刺さるような直線が できるだけ無い場所を選びましょう。

4.写真の撮り方 11/15 突然撮影する 突然撮影されたら、髪型は、メイクは、 服装は？ 事前に知らせてれくたらいいのに！ という気持ちが表情に出ます 人を写す場合、できるだけ事前に連絡しておきましょう。 Webに使うとお知らせしておくとさらにGood。 準備や心構えができるの、撮影時の表情が変わります。

4.写真の撮り方 12/15 撮られたくない人を撮る 写真を撮られるのが苦手な人がいたら 撮らないというのも 一つの選択肢。 写真を撮られたくないという気持ちが強い人には 後ろ姿ならよいのか確認したり 小道具などで顔を隠す提案をしています。

4.写真の撮り方 足を広げた写真 (座った時・歩いている時) 13/15 二の腕が広がった写真 半目や目を瞑っている 写真 撮れても選ばなければOKです。 上記の例以外でも撮られた人が見たくないと思うような写真を 載せるのは避けたいところ。（想像力！）

4.写真の撮り方 14/15 ひとりひとりでも大変なのに 集合写真はどうなる？ 難しい集合写真。 合図して撮っても半眼の方がいたり 目を瞑っている方がいたり… 前のページのNG例のときも解決先は同様ですが 数も大事、かといって時間もかけられないので連写機能を 使いましょう。 カメラの場合はスマホでも保険に撮っておくといいです。

4.写真の撮り方 まとめ Webサイトに必要な写真も 実物の魅力を 「プラスマイナスゼロ」で表現したもの。 上手じゃなくてもカメラがなくても いい写真は撮れます。 いい写真を撮るために準備は大切。 後から「見たい」と思われる写真が ベストです。 15/15

5.セミナーまとめ まとめ

5.セミナーまとめ 私がはじめてWebサイトを作ろうとした時、 真っ白い画面にどう書き出していけばよいのかと 途方に暮れました。 今回のセミナーはその時の自分が 「こんなことを知っていたらよかった」と 思うようなノウハウをまとめてみました。 これからはじめてWebサイトを作る 皆さんにも活用していただけたら嬉しいです！

古民家図書館TSUDURIも運営しています 築年数不明の古民家を DIYなし・リノベなしで 小さな図書館兼オフィスに 豊前市役所の近くです。 毎週水曜日開館 近くにお越しの方はお気軽に お立ち寄りください。 HP

豊前市とはどこ？ 福岡県で一番規模が小さな市 ほぼ大分県寄りの福岡県。 人口約24000人。 特産品は鱧、カニ、豊前ひとつぶ牡蠣。 お米や柚子も美味しい。 森林セラピー基地。 近年、神秘のサウナがあると 福岡市からも人が訪れる 自然豊かな町です。 伝統芸能の豊前神楽や八屋祇園など身近 に歴史が残る。 北九州からの移住者が増えている？ 北九州 空港 福岡 IC 小倉駅 高速30分 豊前 IC 高速70分 豊前 IC 特急30分 宇島駅

日記 オールジャンル ホームページ 全てのリンクはこちら かやはら あやこ フォトライター ここまでご覧いただきありがとうございました！ SNSなどお気軽にフォローください 趣味の歴史・文化 動画多め ホームページ作成教室 Webサイト系ノウハウ