今回紹介するのは事前にアンケートをとり、「みんなが選んだサイト」です。a8などASPが開催しているコンテストに受賞したサイトもあります。
具体的に「どうやって実装しているのか」など機能面まで深堀して、解説していきます。
この記事を書いているのは、WEB制作会社を経営しているフリーランスです。「ichikara」というテンプレートを配布しています。
wingclosetのキャプチャー
上記のとおり、ランキング1位をとりました。
本業はWEB制作ですので「直感的ないいなっ」ではなく、どの部分がよかったのか、論理的に解説できると思います。
まずサイトをみてもらうまえに、おしゃれなサイトを作る要素について語ります。「なぜなら参考サイトだけみただけではなにも自分のサイトに活かせないから」です。
基礎知識を理解しておくと、デザインの幅が増えて自分のサイトの応用力があがりますので、ぜひ参考ください！
おしゃれなサイトを作るための４つの要素
- 余白を整える
- 配色を統一する
- フォントで統一感をだす
- オリジナル画像を使う
シロウト感がでてしまう原因は、バランス、です。
配色や、色づかいはデザインセンスが問われます。
バランスを考えると、１色多くても２色がよいでしょう。
モノトーンにした場合、
あとは、アイキャッチなど、ビジュアル要素も大事です。
画像サイズを統一するだけで、印象がまったく違います。
canvaなどで整形できますので、ぜひ試してください！
パクリサイトとならないようにするテクニック
真似ると、どうしても同じようなサイトになりがち、です。
- アフィンガーで作れたサイトに限定しない
- 他ジャンルから取り入れる
真似たら、同じようなサイトができてしまったとならないように、他のサイトから真似るとうまくいきます。
ボタンを例にみていきます。
参考：価格コム
アフィンガーにはオレンジ色のボタンがなかったりします。。
こちらのサイトは、配色も綺麗ですし、直感的に押したくなります。
マイクロコピーの使い方も、とても参考になります。
こちらは不動産サイトです。
参考：スマイティ
無料という文言をいれるだけで、押したくなりませんか？
アフィンガーにも、ボタンの中に、アイコンをいれることは可能です。
とはいえ、サンプルに記載がないので「上記のような使い方ができない」と思いがちです。
こうやって、別のところから真似るだけで、アイディアはたくさん入ってきます。
みんなが選んだ参考にしたい！アフィンガーサイト
事前にアンケートを取り、そのなかでも人気の高かったサイトをピックアップしました
モノグロ
JET + EX、を組みあわせて作っています。
はじめたての人から評価が高く「参考になった」という声も多かったです。
配色も統一感がでており、とても綺麗なデザインです。
フォトブックずかん
アフェインガーといえば、ランキングサイト。王道ですね。
ボタンの配色を変えるだけで、オリジナル感がでています。
単一を狙う場合や、トップページにビックワードを持っていく場合、固定ページで作り込みを行います。
デザインだけでなく、カテゴリ構成にも参考になります。
シンプシー
１カラムの見せ方がとても綺麗なサイトです。
アフィンガーでは設定画面から、簡単に設定することができます。
各ページから設定を行うこともできますし、固定ページを使って実装することも可能です。
アフィンガーでLPを作りたいけどうまくいかない、そう思ったときは上記を参考にしてください。
2Bcafe
こちらも、１カラムで実装されているサイト。
店舗サイトはめずらいので、参考になると思います。
プラグインを使って、インスタを表示させても、効果的です。
まとめ
- 全部入れない、４つの要素を意識する
- 他ジャンルからまねる
- たくさんみて、情報をあつめる
いろんなパターンのサイトをみて、情報をためましょう。
JINやSWELLから学ぶポイントは多いはずです。
ジャンルにこだわらず、サイトをみるとよりパターンは増えます。
余白、配色、フォント、ビジュアルに意識して、自サイトに参考にしてください！