More than 3 years have passed since last update.

初めて作るアプリのデザインを整える

Last updated at 2021-03-21Posted at 2021-02-15

なぜ記事にするのか

本当に無知（アプリ開発初心者）の段階で、どのような考え方、過程でアプリのデザインをしたかを記録するため

以下の記事で説明していますが、台湾中国語および日本語勉強アプリです。

まずイメージを作るため簡単なスケッチを書きました。

①アプリ起動時に映るページ
②学習開始ボタンがあるページ（拡張性を考えて）
~~③例文一覧ページ~~実装に時間がかかると判断したため、今回は見送り（いつかやります）
④学習ページ

の４つをデザインしていこうと思います。

このページのことをxcodeではLaunchScreenと言うそうで、標準装備のLaunchScreen.storyboradを編集すれば良さそうです。

参考URLに手こずった後が残されていますが、完成しました。

手こずった点は、
・画像が（Auto rayoutで）中心に配置できない
・画像がシミュレータ上で表示されない
・Launchページの時間が短すぎる
でした。

ちなみに真ん中のイラストは、テトラポットです。
コンクリートといえばテトラポットと言う感じです。

ボタンの装飾はまだしていませんが、以下のようになりました。

ちなみに右側のイラストは「頭コンクリくん」です。
頭コンクリの意味→頭固い→頭おかしい→ゾンビ
と言う感じで安易に作ったキャラクターです。

学習ページは以下のようになりました。

翻訳表示＆音声読み上げ

文章を切り替えると、翻訳表示が「？」に戻ります

言語切り替え（日本語を学習したい台湾人にも利用してもらいたいからです）

Swift3 Storyboardで画面の中心にViewを配置する
https://qiita.com/suzuki_y/items/8706eda26c3a1b156506

Storyboard で指定した画像が表示されないときは Asset Catalog を使うと解決する
https://qiita.com/ynii/items/2877f8f935f823c7ee00

Swift：超初心者向け！UITableViewControllerの使い方（１）
https://programming-beginner-memo.com/?p=17

【Swift】Swift入門 ~ NavigationControllerを使ってみる ~
https://swallow-incubate.com/archives/blog/20200205/