![見出し画像](https://assets.st-note.com/production/uploads/images/102101808/rectangle_large_type_2_2e99be8492f928d470ece754e9126219.png?width=1200)
素材アレンジのテクニックを磨くと、素材集の活用の幅が広がる
自作サイトのWebデザインに市販の素材集を使っている、というのは過去記事にも書きましたが…
その素材集の素材、「そのままの形」で使っているわけではありません。
時には素材の一部を切り取ったり、組み合わせたり、加工したりして「アレンジ」しています。
(もちろん「加工OK」な素材集を利用しています。)
…というのも、素材を「そのまま」で使うと、用途が限られてしまうからです。
フレーム素材は「枠」や「ふちどり」として…、ライン(罫線)素材は「区切り線」として…という風に「そのまま」使うより、「フレーム素材やライン素材も加工して壁紙に使おう」とアレンジしていった方が、活用の幅が広がります。
■フレーム素材を加工して壁紙に
具体的なアレンジ例を挙げていきますと、たとえば2023年度の春の壁紙に使っている「クローバー」ですが…
元は「フレーム素材」でした。
![](https://assets.st-note.com/img/1680617605049-jUC8RWokHx.jpg)
上のフレームの、赤丸で囲った部分を切り取り、(余計な部分をカットし)上下に合体させたものを「壁紙」に使用しています。
![](https://assets.st-note.com/img/1680617622895-Rfho8zg47K.jpg)
2022年度の夏の壁紙「波兎」も、元はフレーム素材でした。
![](https://assets.st-note.com/production/uploads/images/102102321/picture_pc_945462b68c6c6b608d24d8950a0f39fb.gif)
元々は波に鶴亀があしらわれていたものを、波の部分だけ切り取り、別素材の兎と組み合わせて「波兎」模様を作っています。
(「波兎」は縁起の良い和柄。)
■パターン素材はトリミングして壁紙化
素材集にはサイトの壁紙として使えそうな「パターン素材」がよく収録されています。
ですが「そのまま」では壁紙として使用できないものも多いのです。
壁紙素材は「繰り返し」が基本。
1つの素材を上下左右に繰り返し並べて表示していくものです。
ところが、素材集に収録されているパターン素材をそのまま繰り返すと、画像と画像の「境目」が上手く繋がらず、おかしなことになってしまうことがあるのです。
![](https://assets.st-note.com/img/1680617115787-l2yX94Rh57.jpg)
それに、そもそも素材集に収録されている素材をそのまま使うと、サイズが大き過ぎて使い勝手が悪いのです。
なので、パターン素材を壁紙に使いたい時には「ちょうどこの部分を繰り返せば、上手く境目が繋がる」という箇所を見極め、トリミング(切り取り)します。
![](https://assets.st-note.com/img/1680617164297-NQHhhD731s.jpg)
実際に上の素材をトリミングして壁紙化し、色や明るさなども調整して作ったWebページがこれです↓。
![](https://assets.st-note.com/img/1680617199741-CcDC2jhE6F.jpg?width=1200)
■アレンジ次第で雰囲気はガラッと変わる
人物や小物などのパーツ素材も、アレンジ次第で活用の幅は広がります。
「『そのまま』ではサイトの雰囲気に合わない」という時でも、少し加工するだけで雰囲気をガラッと変えることは可能なのです。
たとえば、元は「ドレスを着たポニーテールの女性のシルエット画像」の素材…
![](https://assets.st-note.com/img/1680617708369-xgQgOfoQIj.jpg)
赤丸で囲った部分を塗りつぶし、ドレスの部分だけ色を変えてアレンジしたのが、下の画像になります(+頭にクラウンを追加しています)。
![](https://assets.st-note.com/img/1680617272912-qnzeL9oSLz.jpg)
他にも別ブログで素材アレンジのやり方を紹介していますが…↓
カラーリングや効果を変えるだけでも、素材の雰囲気はガラッと変わるのです。
■素材を「全体」だけでなく「部分」でも見る
素材アレンジに1番必要なのは「視点」だと思っています。
素材を「全体」として見るだけでなく、「この部分が、何かに使えそうだ」と、細かな部分部分にまで目を向けることです。
たとえば自分が実際に使った例ですと、天使のシルエット画像の「キラキラした効果」の部分だけを切り取ったり…。
![](https://assets.st-note.com/production/uploads/images/102102758/picture_pc_0e80198badb22c2cf1dc3259714f4d1c.gif)
上で書いた「フレーム素材を壁紙に」の例もそうなのですが「全体では使えなくても、この部分は使える」「単体では使えなくても、他と組み合わせれば使える」という風に、柔軟に頭を使っていけば、素材活用の幅はグッと広がります。
■素材集リスト
この記事で紹介した素材が載っている素材集の一覧です。
クローバーのフレーム素材(&蝶のパーツ素材)
波(&鶴・亀)のフレーム素材(&うさぎのパーツ素材)
(トリミングして壁紙化の例の)パターン素材
ドレスの女性のシルエット素材&天使のシルエット素材
この記事が気に入ったらサポートをしてみませんか?