< pocket

秋らしいデザインを制作する時に参考になるWebサイト&紅葉や落ち葉のフリー素材まとめ

秋らしいデザインを制作する時に参考になるWebサイト&紅葉や落ち葉のフリー素材まとめ

春にもやりましたが、またまたブログを期間限定で秋デザインに変更しました!今回は、秋らしいデザインを制作するにあたって参考にしたWebデザインや、落ち葉や紅葉などの使いやすい秋のフリー素材をまとめてご紹介します!

春はあけぼの、夏は夜…とくれば、「秋は夕暮れ」ですよね〜!というわけで、今回は夕空と紅葉がテーマのデザインです。11月いっぱいまで公開する予定です!今回もPC版しか作っていないので、スマホの方はPC版表示にして確認してみてくださいね〜!

Design Color秋デザイン

参考になる!美しい秋のデザインいろいろ

秋デザインを制作する時に参考になるWebサイトやポスター、グラフィックデザインなどを集めてみました!

極彩の秋 紅葉の東部カナダ

ファーストビューの写真が美しい「エア・カナダ」のプロモーションサイト。やっぱり秋デザインのキーワードといえば「紅葉」ですよね。赤・黄色・緑・茶色など様々な色を楽しめる紅葉は秋デザインには必須ともいえるモチーフなのかもしれません。それにしてもカナダでもこんなに美しい紅葉が見られるんですね!行ってみたい。

極彩の秋 紅葉の東部カナダ

エア・カナダ【日本】カナダ・オンタリオ州、ケベック州とその近郊情報サイト「極彩の秋 紅葉の東部カナダ」

星野リゾートの温泉旅館ブランド「界」

有名な高級旅館である「星野リゾート」。こちらはそのブランドの中の温泉旅館「界」の2015年版秋シーズンサイトです。こちらは日本の紅葉なので、和風テイストに仕上がってますね。抑えめな配色の秋デザインは和風デザインとも相性がいいようです。

星野リゾートの温泉旅館ブランド「界」

紅葉と月を愛でる美食旅| 星野リゾートの温泉旅館ブランド「界」

Seasonal Splendor | Tennessee Vacation

アメリカのテネシー州の観光サイト。ヒーローイメージの紅葉とヴィンテージ風なデザインがマッチしてとてもカッコいいですね。また、サイト内には手書き風のフォントが所々に使われていてオシャレ感も!秋デザインにはこういったグランジ感のあるデザインや手書きっぽいテイストにもピッタリですね。

Seasonal Splendor | Tennessee Vacation

Seasonal Splendor | Tennessee Vacation

Official Idaho Vacation and Travel Planning Guide

こちらはアメリカのアイダホ州の観光サイト。秋らしい画像をどどーんと背景に敷いています。こちらもヴィンテージ風なデザインですが、フラットなテネシー州のデザインとは違ってスキューモーフィックデザインに近いです。細部の作り込みが素晴らしく、古い紙や木目調のテイスト、落ち着いた色調などが秋の画像とよく合っていますね。

Official Idaho Vacation and Travel Planning Guide

Official Idaho Vacation and Travel Planning Guide

Forrst | Autumn – WordPress Theme – A post from detrans

ZURBというデザイン会社が運営している「Forrst」というデザイナーのコミュニティサイトより。秋のWordpress用デザインテーマだそうです。秋のカラフルな配色と活き活きとした写真使いに目が奪われますね!

Forrst | Autumn - WordPress Theme - A post from detrans

Forrst | Autumn – WordPress Theme – A post from detrans

マリノアシティ 実りの秋 | Oeuflab|ウフラボ

「マリノアシティ福岡」のポスター。2012年のものだそうですが、カラフルな色合いと可愛いイラストがとてもよく似合っています。

マリノアシティ 実りの秋 | Oeuflab|ウフラボ

マリノアシティ 実りの秋 | Oeuflab|ウフラボ

Gallery: Beautiful Typography, Lettering & Calligraphy | From up North

「From up North」という海外デザインブログの記事より。カンバスに描かれたような落ち葉のイラストとタイポグラフィが美しいです。

Gallery: Beautiful Typography, Lettering & Calligraphy | From up North

Gallery: Beautiful Typography, Lettering & Calligraphy | From up North

秋デザインに使える!フリーWeb素材(ベクターデータ)

シルエットデザイン

フリーのベクターデータ素材といえばここ!ありとあらゆるシルエットを扱っているシルエットデザインさん。いつもお世話になってます!「葉っぱ」で検索すると色々な種類の葉っぱのベクターデータが入手できます。もちろん秋に使えるカエデやイチョウの葉っぱのシルエットもバッチリ!

シルエットデザイン-秋素材

シルエットデザイン

ちなみに、私がテーマ内で使っているのは上記画像の上ふたつ。背景パターンやトップへ戻るボタンなど、至るところに使用させていただいてます。

秋デザイン使用例

ベクタークラブ

こちらも、フリーのベクターデータをたくさん扱ってくれている素材サイトです。とにかく素材ひとつひとつのクオリティが素晴らしい。秋だけでなく、四季折々のベクターデータを取り揃えています。「自然・風景」で絞り込むとたくさん四季の素材を見つけられますよ。

ベクタークラブ-秋素材

ベクタークラブ<イラストレーター素材が無料>

私が使用させていただいているのはこちら。ベクターデータなのでトップ画像などの大きな部分にも使用できます!

秋デザイン使用例

紅葉が舞う秋のデザインエレメントのイラストai/eps

秋デザインに使える!フリーWeb素材(写真)

ぱくたそ

秋の写真を探すならぱくたそ!こちらもいつもお世話になってます!ぱくたそには季節ごとに写真がカテゴリー分けされているため、検索にとても便利です!

ぱくたそ-秋素材

ぱくたそ – フリー写真素材・無料ダウンロード

ちなみに、今回のデザインで私が使用させていただいた写真はこちら。

ぱくたそ-秋素材

赤く紅葉した木
もみじの落ち葉

ヘッダーのコウモリとフッターの落ち葉のテクスチャの部分に使用しています。フッターのテクスチャはPhotoshopでシームレスにしてパターンとして敷いています。

秋デザイン使用例

秋素材が置いてあるサイトいろいろ

その他にも秋デザイン用の素材はたくさん!ざっとご紹介しますよ。

Webdesigner Lab

落ち葉のシームレスパターンやPhotoshopブラシなどが置いてあります!「leaves」で検索するとヒットしますよ。

Webdesigner Lab-秋素材

Webdesigner Lab – tutorials, templates, resources for web designers

フリーデザイナー

こちらも季節のタグ一覧があり、「秋」で絞り込んでみるとPSDやAIなどたくさん秋デザイン用の素材が見つかりますよ!使用に関しては素材それぞれにライセンスがあるそうなので、自身で確認してみてくださいね。

フリーデザイナー-秋素材

無料素材イラスト・ベクターのフリーデザイナー

秋素材のまとめ記事

ベクター素材やブラシ、テクスチャ…などなど。秋デザインを制作する時に便利な素材をまとめた記事たち。こちらも参考にどうぞ!

秋デザインに使える配色

鮮やかすぎてもダメだし、かといって渋すぎる色も・・・。簡単なようで意外と難しい秋デザインの配色。そんな時は以下の記事が参考になりますよ!

秋をイメージさせるカラー配色

秋の配色や、寒色・暖色との組み合わせ方などが書かれていてとても参考になります!色コードつきのカラーパレットも用意してくれているのが嬉しい。私は寒色と組み合わせるのは難しそうだったので、今回のデザインは暖色で固めました。

シーン別カラーチャート | 秋をイメージさせるカラー配色 | Web制作会社スタイル

シーン別カラーチャート | 秋をイメージさせるカラー配色 | Web制作会社スタイル

2015年秋のトレンドカラー

デザインだけでなく洋服の組み合わせの参考にもなりそうな記事。Photoshop用のスウォッチファイルもダウンロードできて便利!

この秋、デザインやファッションに使いたい10色 -2015年秋のトレンドカラー | コリス

この秋、デザインやファッションに使いたい10色 -2015年秋のトレンドカラー | コリス

ちなみに私はAdobe Color CCで「autumn」というワードで検索し、好みの配色を見つけました!Adobe Color CCは自分の好きなカラースキームを作成することができ、Adobeアカウントを持っていれば好きな配色を保存しておけたりPhotoshopにスウォッチとして登録できるのでオススメです!

Adobe Color CC-「autumn」検索結果

Adobe Color CC

ちなみに今回の秋テーマの配色はこちら!この5色をベースに少しずつ色味を調節しながらデザインしました。

DesignColor 秋テーマ配色

その他デザインで工夫した点など

デザインの中で一番のお気に入りは上からパラパラと落ちてくる落ち葉のスクリプトです!こちらはもともとactywayあくちーさんが制作された桜のスクリプトだったのですが、少し手を加えて葉っぱとして使用させていただいています!

あくちーさんいつもありがとうございます!あくちーさんの桜スクリプトの記事は以下より。ぜひぜひサイトに使ってみてください!

春風そよよ〜!桜の花びらがヒラヒラ舞い落ちる JavaScript だよー!

落ち葉のスクリプト

ちなみに、今回のデザインではコンテンツの背景を古びた紙のようにしてフチをギザギザにしました。以前にチュートリアル記事を書いたので、方法が知りたい方はそちらもぜひ読んでみて下さいね!

年賀状作成に使える!紙のフチに和紙のようなギザギザ感を出す方法 | Design Color

春に続いて秋テーマもなんとか作れました!これで残すは冬のみ・・・。もし何か変なところや不具合があったら教えていただけると助かります!
以上、彩がお伝えしました!

この記事をシェアする!

コメント

0件のコメント

コメント

もし何かコメントをいただければ幸いです。また、ご指摘等も大歓迎です。
よろしくお願いします。(※Eメールアドレスは公開されません)

トラックバック

トップに戻る