Skip to content

Instantly share code, notes, and snippets.

@yuyalush
Last active July 15, 2016 07:29
Show Gist options
  • Save yuyalush/02a651046bb52ae9b338bbf5297bf617 to your computer and use it in GitHub Desktop.
Save yuyalush/02a651046bb52ae9b338bbf5297bf617 to your computer and use it in GitHub Desktop.

簡単に豪華Webサイト作成術

外部サービスと組み合わせた

企業サイト作成とお悩み相談会

日本マイクロソフト / 吉田 雄哉


どうやって差別化をはかるか

  • デザイン性 や 使いやすさは当たり前
    • Webサイトビルダーでそこそこのページは作れると思われている
  • 提案するネタを持っているか
    • 時代の変化に付いていけているか
    • 顧客が気が付けない知見を提供できるか

作戦を考えてみる

  • 他の人が提供していないものを提供する
    • デザインやコンテンツの中身より多機能化を目指してみる
  • サイト構築といった範囲をはみ出る
    • 地力を活かした別ジャンルへ取り組む
  • 提供して終わり、から脱却する
    • よりサイクリックな取り組みにする

アプローチをもっと手軽に


デザインをモダンにする

デザインテンプレートを活用して、今風の手法を学ぶ

https://freehtml5.co/

注意点

  • 商用利用が可能であるかを確認しよう
  • 無料利用が可能でも、コピーライト表記が必要なケースもある

脱CMSという方法もある

WordPressといったCMSを使わずに、HTMLを生成するソフトウェアを使ってみるのも良いかも。

Hugo https://gohugo.io/

HTMLが簡単に出来上がるなら、ブログなどの頻繁に書き換わるタイプのページであっても対応できるし、サイト提供の環境がシンプルになるため、トラブルも少なく、サイト配信の方法もかなり自由になる


別のジャンルにはみ出る


サイトをアプリケーションにしよう1

Windows App Studio https://appstudio.windows.com/ja-jp

  • サイトをデスクトップアプリにできる
  • ブラウザを開かせず、いきなりフォームへ誘導するなども可能
  • Windows10 , 8.1などに限られる

サイトをアプリケーションにしよう2

GoNative.io https://gonative.io/

  • ネイティブiOS, Androidアプリケーションを作れる
  • スマフォアプリ開発と同じくマーケットプレイスにも出せる
  • 各種手続きやライセンスが必要

もっと多機能にしよう


チャット機能を追加する

サイトにチャット機能を追加する https://www.tawk.to/

デスクトップアプリでやり取りする https://www.tawk.to/tawk-to-for-windows/


手順

  1. すでに何らかのサイトをお持ちの場合は、早速仕込んでみましょう。
  2. もし特にない場合は、https://codetasty.com/ でアカウントを作成し、試してみましょう。
  3. https://www.tawk.to/ でSign UPする URLを間違えると、とても危険なサイトにつながるので、ご注意ください
  4. https://www.tawk.to/knowledgebase/getting-started/creating-a-new-account/
    こちらを参考に作業してみてください

codetasty

Cloud IDEです(つまり、ブラウザだけで開発ができるサービス)今回は無料枠で試します。

Emmetという機能があるので、index.htmlを開いて Helloを消して、html:5と打ちTABキーを押してみてください。


提供して終わりからの脱却


継続的な取り組み

出展: フィードバックループ構築の最初の一歩:メトリクスの重要性


効果を測定

Google Analytics https://www.google.com/intl/ja_jp/analytics/

本当に見られているのかを知り
どのように見られているのかを追い 改善に役立てる

  • デスクトップかモバイルか
  • ページを渡り歩いているか
    • 他の記事も見てもらえるようにする
  • どこから来るのか

サービスを連携させよう

IFTTT https://ifttt.com/

  • 特定の宛先からのメールをToDoに入れる
  • Facebookでリンク付きの投稿をした場合、OneNoteに保存する

アイデア次第で色々と役立つことが提供できる


やってみようのコーナー


お試しハッカソン

これまで紹介したものに取り組んでみてください。

テーマ

  • サイトにチャット機能を追加してみる
  • Codetastyを使ってテンプレートを編集してみる
  • Hugoを使って静的サイトを作ってみる
  • WebAppStudioでサイトをアプリにしてみる
  • Google Anayticsを仕込んでみる
  • IFTTTを使ってサービス連携をやってみる

お悩み相談コーナー


皆さんの悩みをお教えください

  • 属性毎にチームを作って、まずは話しましょう

    • 受託開発でデザインやってます系
    • 企業内でHP担当やってます系
    • なんとなく面白そうな話なので参加しました系
  • どうやると解決できそうか考えてみましょう


ご質問がある方

https://www.facebook.com/yuyalush

  • 友達の申請をお願いします。
  • メッセージをお送りください。メッセージを来た方を承認させていただきます。

http://www.cloudninja.asia

  • 上記のブログにアクセスし、右下のお問い合わせからメッセージをお送りください。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment