もう1ヶ月以上前のことになりますが、学生生活も残すところわずか2ヶ月ほどのタイミングで、所属する専攻の外部向け研究発表会のWebサイトを作らせていただきました。

それまでの経験

言語は Python メインで、HTML と CSS 最低限レベル。javascript は触ったことあるけど忘れた
Figma を使ってモックアップ的なのを作成したことはある
Dash を使ったWebアプリもどきを作成したことがあるだけで、本格的なWebサイトなんてもってのほか

という、ほぼ Web サイト作成未経験者です。

ソースコードはこちらです！

github.com

ポイント

インスタンスを用いたカードアイテム（発表スライド）の生成
→ PHP を Progate で勉強。発表スライドは一人一人スプレッドシートに埋め込みリンクを入力してもらい、 API を利用してデータを読み込み。方法は後述
研究分野タグの絞り込み
→ 一緒に開発したもう1人が自ら実装してくれました....。jQueryだけでいけるそうです。圧倒的感謝。
コメント機能
→ スライドにコメントを残す機能を、SQL 無しで実装しました。方法は後述
デザイン全体
→ 配色を含め、サイト全体のデザインは自分が担当しました。Figma を使ってあれこれデザインを考えるのが一番楽しかったかもしれない。

出来上がったサイトはトップページとかスマホ向けレスポンシブ対応になりきれていないし、普通にサイトとして未熟であることは重々承知です....。

ブログにするか大いに悩みました。でも、こんな人間でもにツールを使いこなせばここまでいけるよ、と少しでも誰かの参考になれたら良いなーと思い、記事にすることにしました。ちょっと長いので、気になったところだけでも見てみてください。

それまでの経験
ポイント
用いたツール
Semantic UI について
デザインについて
スライドカードについて
コメント機能について
最後に

用いたツール

デザイン：Figma
実装：PHP、HTML、CSS、必要に応じて jQuery
CSS フレームワーク：Semantic UI
タスク管理ツール：Notion
開発環境：VS code + Github

タスク管理ツールは Trello など人気なイメージだが、最近、今流行りの Notion にハマっててタスク管理ツールとして試しに導入。

エンジニア向けのタスク管理テンプレートが公開されているのでそれを有り難く利用するだけで、とても使いやすかった。

Notion については色々な情報が公開されているので詳しく言及しませんが、良い。（語彙力）

創業者自身が UI/UX デザイナーだからか、直感的な操作と機能性に優れている。逆に言うと機能が多いため、使いこなすのがちょっと難しいが、ありがたいことに無料のテンプレートが数多く公開されているので、どんどん使うべき。

欠点としては手書きができないことか....これができればiPad でノートとしても使えて最高....

Semantic UI について

Webサイトの見た目はほぼ Semantic UI に頼らせていただきました。

CSS フレームワークとしては Bootstrap が定番だと思いますが、「いかにも」感が出てしまうので余計なプライドが働いた。そこで、

モダンでおしゃれ (パッと見て初心者が作ったサイトだと分からない)
使いやすい

ことを満たした都合の良いフレームワークはないか〜ないか〜と探して、辿り着いたのが Semantic UI。

選定にあたって参考にしたサイトはこちら。

Semantic UI の使い方については最初は以下をはじめとする日本語のブログで大局観を掴み、慣れてきたらひたすら公式ドキュメントで必要な機能がないかを探した。

https://qiita.com/Yuta_Fujiwara/items/8abeda1b92dcaf505149

https://qiita.com/sandabu/items/336fe312acbec98d21e3

導入

CSS フレームワークを使用する方法は主にふたつ。

ローカルに必要なファイル（cssとjs）をダウンロードする
インターネット上に置かれているファイルをそのまま読み込む(CDN)
CDNとは、Contents Delivery Network の略。
【図解】CDNとは？仕組みと技術の基礎知識 | カゴヤのサーバー研究室

私は後者の CDN で導入した。Semantic UI の CDN のリンクは少々わかりにくいので注意。

semantic-ui.com

使った感想

それまで Bootstrap しか触ったことがなかった身として、複雑で動的な機能も、文法にしたがって jQueryを少し書くだけで実装できる点にとても感動した*1。

それに気づいたのは後の方で、知識補強のためにこれまた Progate を使って jQuery を勉強した。そうすると、Semantic UI の凄さがよりわかる。

色々使ったけれど、ポップアップ、モーダル、Dimmer コンポーネントなど動きを含むモジュールを重宝した。

例えば Dimmer コンポーネントは、普通は hover イベントを実装して、css で装飾して....など手間がかかるところを、html において親要素に dimmable image、子要素に ui dimmerクラスを指定するだけで表示が変わる動作を簡単に実装できる。

<div class="blurring dimmable image">
      <div class="ui dimmer">
         <div class="content">
              <a class="ui inverted purple button" href="#guest-speakers">More</a>
         </div>
       </div>
       <img class="ui rounded image" src="img/about_guest.png">
</div>

f:id:wimper_1996:20210322033602p:plain

(追記)
1ヶ月後、公式サイトを見たら、ui dimmer で子要素 content クラスを囲めば良くなっていた。

Since 2.3 dimmers with content now only need a single wrapping content container.

注意点

semantic-ui のスタイルを変更する意味合いで、カスタムcssシートを用意していたのだが、ちょくちょく適用されない場面があった。(理解 & 実装力不足の可能性も大いにある...)

そんな時は仕方ないので、html の style タグで無理矢理指定した。

一例

/* 適用されない */
/* .ui.watching.button.right.floated {
  font-size: 12px;
  padding: 1em 0.8em;
} */

適用されないので html 内でスタイルを指定

<a class="ui watching button right floated" style="font-size: 12px; padding:1em 0.8em;"><i class="video icon"></i>発表動画を観る</a>

デザインについて

一応大学院ではサービス提供者と顧客の価値共創を研究したこともある身として、UI / UX デザインは Figma を駆使してあれこれ考えた。

流れは

① ワイヤーフレームを作成する

何を載せるページを作るか
必要な機能・要件は何か

f:id:wimper_1996:20210322025143p:plain — 実際に作ったワイヤーフレーム（超シンプル....）

② デザインカンプを作成する

サイトのベースカラー、メインカラー、アクセントカラーを決める www.m-hand.co.jp
「整列・隣接・反復・対比」というデザインの４原則を守りデザインする
デザインの名著

たったの２ステップ！？という感じだが、実際にやってみると些細な色の配色、フォントの大きさ、要素の配置、かなり悩む。デザインは本当に沼。

いろんな本やサイトを見て自分なりにシンプルで統一的な見た目になるよう心がけました。参考にしたサイトを列挙してみます。

フリー素材 Illustrations | unDraw ：ベクター画像をダウンロードし、Figma で編集するなどして少し改変して使用。
サイトの配色の決定は過去記事。 wimper-1996.hatenablog.com
デザイン案 Pinterest - ピンタレスト："event website" など中心に検索し、色々見てインプット。学園祭の HP も参考にした。
デザインについての神資料これだけ守れば見やすくなるデザインの基礎 - Speaker Deck：本当に参考になる。ここのサイトをきっかけに、ノンデザイナーズデザインブックを購入している。
神サイトデザイン研究所 | 読んでデザインを学ぶ参考ブログ：Twitter をフォローするだけで勉強になる。情報量がすごくて全て読みたくなるけどグッと堪えて役立ちそうな情報をザーッと探したりした。

スライドカードについて

https://www.sk.tsukuba.ac.jp/~msesympo/2020/presentation/student

発表資料を組み込んだカード１つはこのように書ける。が、これを学生分 40 個以上打ち込むのは地獄。そこで、PHP を用いて Card クラスを作り、for文でインスタンスを生成して自動化した。

<!-- card example -->
<div class="slide purple card" style="width: 400px;">
    <img src="../img/slide_example.png" width="100%"> <!-- Google スライドにする際は、ここを埋め込みリンクにすればOK -->
    <div class="content">
        <div class="header" style="margin-top: 40px;">(スライド番号).研究タイトル</div>
        <div class="ui grid">
            <div class="ten wide column time">
                <div>①発表時間１(Remoテーブル)</div>
                <div>②発表時間２(Remoテーブル)</div>
                <div>メニューのTime Tableをご確認ください</div>
            </div>
            <div class="six wide column student-name">発表者名</div>
        </div>
    </div>
    <div class="extra content">
        <div class="ui two column grid">
            <div class="column">
                <div class="ui tag labels">
                    <p><a class="ui tag label">研究分野①</a></p>
                    <p><a class="ui tag label">研究分野②</a></p>
                </div>
            </div>
            <div class="column youtube-icon">
                <div class="ui icon button" data-tooltip="研究に対する感想や応援等を、是非コメントください。"><i class="ui comment alternate icon"></i></div>
                <a class="ui watching button right floated" style="font-size: 12px; padding:1em 0.8em;"><i class="video icon"></i>発表動画を観る</a>
            </div>
        </div>
    </div>
</div>