2022 ソフトウェア設計及び演習用の班Wiki
22::gr05::髙橋寛知
第2回(4/22)
- 【自宅待機のため欠席】
- 岩大サークルアキネーター（仮題）となった
- 簡易企画書の作成
- 簡易企画書
第4回(5/13)
- ものと操作の洗い出しの細部を検討し、余った時間でモジュール分けをした。
- 課題であったアルゴリズムについては0と1の配列の組み合わせで振り分け、動作が複雑にならないようにすることになりそう。
- 自分はデザイン担当に決まったので、次回以降は背景や選択肢などのディテールにこだわったデザイン案を考えてより良いものを作りあげていきたい。
第5回(5/20)
- 今回はイラストの原案とツールの精査をした。
- 試しにPC正規のソフトを使って絵を描いてみたがグラデーションなど細かい部分がうまく描けなかったので他のソフトも試しながら作業を進めていこうと思う。
第6回(5/27)
- 今回はお絵描きツールが決まり、本格的にデザイン作業が始まった。
- 初めてなのでやり方がわからず苦戦したが、試行錯誤しながら一つのレイヤーを完成させるところまでは進めることができた。今回で描き方は理解したので、次回以降作業スピードを上げていきたい。
第7回(6/3)
- 今回は前回に引き続きFireAlpacaというソフトを使ってイラストの作成を行った。
- 自分はボタンなどのページ遷移に関わる部分のデザインを担当しており、はい/いいえの選択肢とふきだし、ホームボタンと最後の結果表示をするところの枠を作成した。ソフトを用いての描画だと円が滑らかになるので非常に役に立った。
- 今回で必要なパーツをほとんど作成できたと思うので、次回はそれを統合して一つのページにしたいと思う。
第8回(6/10)
- 今回は前回作成したパーツをもとにhtml形式で一つのページに表示させるコードを記述した。
- レイアウトについても任されていたのでどの位置にどのパーツを配置すればよいか考えながら作業した。
第9回(6/17)
- 今回は中間発表だった。
- 他の班の発表を見てみるとプログラム面でもビジュアル面でも高度なものが多数あったので、より洗練され、かつユーザの視点に立ったソフトを作っていきたいと強く感じた。
第10回(6/24)
- 今回はボタンの表現を洗練させるためにhtmlとcssの深い理解に努めた。
【html】
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="K_button.css" />
<title>K_button</title>
</head>
<body>
<input type="button" class="btn" id="b_btn" value="文 化 系" />
<input type="button" class="btn" id="u_btn" value="運 動 系" />
</body> </html>
【css】 .btn { box-shadow: 0 1px 4px rgba(0, 0, 0, .2); /*枠の影*/ color: #fff; /*文字色*/ display: inline-block; /*箱の表示方法*/ font-weight: 700; /*文字の太さ*/ font-size: 24px; /*文字の大きさ*/ padding: 1.25rem 1rem; /**/ margin: .5rem; /*箱同士の間隔*/ text-align: center; /*中央揃え*/ text-decoration: none; /**/ width: 200px; /*箱の横幅*/ height: 100px; /*箱の縦幅*/ transition: .3s; /*アニメーションにかかる時間*/ border-radius: 50px; /*角の丸み*/ position: relative; /*位置指定*/ top: 150px; /**/ left: 80px; /**/ cursor: pointer; /*カーソルの形*/ }
#b_btn { border: 3px solid #007b43; background: #007b43; }
#u_btn { border: 3px solid #ba2636; background: #ba2636; }
.btn:hover#b_btn { background-color: #fff; color: #007b43; letter-spacing: .3rem; }
.btn:hover#u_btn { background-color: #fff; color: #ba2636; letter-spacing: .3rem; }
.btn:active { position: relative; top: 160px; }
第11回(7/1)
- 今回はボタンと画像の表示の両立に苦戦した。
- 結局時間内にできなかったので個人的に調べたいと思う。
.btn { background-color: #e6b422; background: linear-gradient(); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); color: #2b2b2b; display: inline-block; font-size: 24px; font-weight: 700; padding: 1.25rem 4rem; text-decoration: none; transition: .3s; cursor: pointer; width: 200px; height: 80px; margin: 3rem; }
.btn:hover { opacity: .9; }
.btn:active { position: relative; top: 20px; }
最終更新日：2022/07/15 15:43:46
