企画書 2015 NE25-0163F NE25-0225B NE25-0049H Web NE25-0058F NE25-0067D NE25-0089C NE25-0136B NE25-0159J NE25-0189H NE25-0199D web web 18 22
1 1 18 18 22 web web 2 2 1 Web four Web 3 4 four
SNS web 2 1 1 2 2 2 2 3
4 Re:STACK Re: remember reply STACK 1 1 WEB URL URL WEB 5 ( ) 140
( ) 22 ( ) 4 < > four SNS
21 3 1 1 1 < > 3 four 1
21 3 < > 3 5
19 1 four
rails web git hub git commit push rails javascript javascript
画面遷移 web サイトということで ユーザインタフェースを意識し サイトを利用する人が使いやすい画面を考えることから始めた スマートフォンでサイトを見ることが多い現代では スマートフォン用のサイトも必要と考え レスポンシブデザインを取り入れることにした ラベル名のわかりやすさ ボタンの配置など ユーザ第一の画面遷移図を作成
ロゴ Re:STACK は 思い出を感謝のカタチとして プレゼントする ということで S を リボンとし 色を 感謝のカタチとは赤系 というイメージのデザインとした 親こう four は 親を游明朝体 こうを游ゴシック体とし 大人っぽさが漂うようなイメージのデザインとした four について for は Baskerville というセリフ体 for と視覚的に読んでもらうために色とフォントで u は Tahoma というサンセリフ体 four と音的に読んでもらうためと 意味的には for を強調したかったのでフォントと色で違和感を出した サブタイトルを Noto Sans というゴシック体とし 細くてもしっかりしていて存在感のあるものを選んだ 4 つのこう ( 孝 行 考 稿 ) を囲んであるのはまとまりを作るためで そして丸角で親しみやすさを表現した サイトデザイン全体の色は 親孝行 という感謝を伝えることがテーマのため 暖色系をベースとしている 長文を読むことを前提としていることから コントラストの差を抑えて目へのダメージを軽減するような文字色とした 加えて 字間や行間 枠との余白を微調整し 文章に詰まった印象を与えないようにした ラベルは現在表示しているページのラベル色のみ変更して どのページを表示しているのかわかりやすいようデザインしたが 開発の都合上実現されなかった そのため ページ毎にそのページのタイトルを入れることとした レスポンシブデザイン パソコン用サイトとスマートフォン用サイトを用意するため 画面サイズに合わせてデ ザインを変更した