ネットショップでよく使う配達の時間帯指定。
テキストだけでなく、アイコンを使ってわかりやすく表示するために時計のアイコンを使っているサイトをよくみかける。
ちょっと探してみたらいくらでもフリーで探せるけれど、
自分でもオリジナルで作ってみたいと思うので、
ここでは時間帯指定のアイコンを作る方法を解説する。

時間帯指定のアイコンのどこが難しいかというと、
時計の角度だと思う。
普通、時計は１周３６０°を１２時間で区切るので、
１時間の角度は３０°となる。
これを利用すると、簡単に正確な角度で時計を作ることが出来る。
その時に準備として作るのが、それぞれの各が３０°、６０°、９０°になっている直角三角形。
この三角形の３０°の部分がちょうど時計の１時間になるので、
この三角形を使えば、正確に時間を表すことが出来ることが予想できる。
とりあえず、この直角三角形を作る方法。
普通に作ると難しいのだが、ちょっと頭をひねって考えてみよう。
実はこの三角形、正三角形をまん中で切るだけでできる。
なぜか、小学生の図形の角度の勉強を思い出そう。
（正三角形の１つの角度は６０°なのでまん中で切れば３０°の角度が出来る）
それはともかく、これでとりあえず必要な三角形が準備できた。

さて、ここから実際に時間帯指定のアイコンを作っていく。
用意するのはさきほどの直角三角形と円。
これらの組み合わせで時間帯指定アイコンを作る。
まずはベースとなる円を描く。

次にさっき作った直角三角形を重ねて配置。

この組み合わせでこれから２つの扇形を作っていく。

まずは直角三角形の部分を選択して、「シェイプから一部型抜」を適用


すると次のように、円から直角三角形がくり抜かれた状態になる。

次に、小さい扇形を作る。
レイヤーをコピーして、次は三角形と円の両方を選択状態にする。
そして「シェイプ範囲を交差」を適用


すると次のように小さいほうの扇形が作られる。

最後にそれぞれ色を変えて組み合わせれば完成。

今作った時間帯は１２時から１時の時間帯。
他の時間帯はこのアイコンを３０°ずつ回転させるだけでいい。

では、２時間や３時間の連続の場合はどうするか。
これも簡単、直角三角形のみを選択してコピーして回転させるだけ。

小さい扇形と大きい扇形が分かれているので色々な効果を使って、ちょっと変わった時間帯の表示を作ることが出来る。