グラフィックソフトで作成したようなフチ文字をアプリ内で実現する方法 by 横田 孝次郎

iOSDC Japan 2022
レギュラートーク(20分)

グラフィックソフトで作成したようなフチ文字をアプリ内で実現する方法

macneko_ayu 横田 孝次郎 macneko_ayu
9

フチ文字とは、文字の輪郭を線で縁取る文字装飾の手法です。
新聞の見出し、スーパーのチラシ、そして動画のテロップなどでよく用いられています。
みなさんも一度は目にしたことがあるかと思います。

そんなフチ文字、さらにグラフィックソフトで作成したようなフチ文字をアプリ内で使いたい。
そうデザイナーから相談されたとき、どんな方法が思いつきますか。
AttributedStringを用いて文字の輪郭に線をつければ解決、そう思いませんか。
しかし、この方法にはある問題があり…。

本トークでは、私が試行錯誤しながら、より質が高く美しいフチ文字を模索した内容を事例を交えながらお話します。

以下の内容を予定しています。
・フチ文字とはなにか
・発表者の思う美しいフチ文字、美しくないフチ文字の定義
・UIKitを用いたフチ文字の実現方法
・SwiftUIを用いたフチ文字の実現方法