インスピレーションが湧き出る!芸術的なフランス発のホームページ6選
フランスの首都パリは、19世紀以降、「芸術の都」と呼ばれることがあります。
一説によれば、ナポレオン時代に、国王の居住がヴェルサイユに移ったこどで荒れ果てたルーブル宮殿が整備され、当時国王や王族のコレクションだった美術品を展示して一般市民にも解放し、芸術に触れる機会が増えたからだと言われています。
さらには、ナポレオン3世時代に設計士オスマンを中心にパリの再開発が行われたことも理由だと言われています。
数多くのサロンが開かれ、芸術家が集まり、新芸術を模索する若き芸術家たちが集まり、芸術運動を行うようになったパリ。
それ以前はイタリアが芸術の中心と言われていましたが、多くの芸術家たちがパリに集うようになったのです。
100年以上経過した現在でも、フランスは注目したい国の一つです。
世界の共通語が英語である今、どうしてもフランス語で書かれたホームページにはスポットライトが当たりにくいのが現状です。
しかし、「モード」にも通じるモダンな作風は、フランスのデザイナーの得意とするところでもあります。
今回は、インスピレーションが湧き出るフランス発のホームページをご紹介します。
インスピレーション湧き出るフランス発のホームページ
1. ISTHME
ISTHMEはフランス系カナダ人のデザイナーであるイサベルさんが立ち上げたポートフォリオサイトです。
さまざまな抽象的な作品が、まるで博物館で絵画を見るようにバラバラに展示されており、クリックすることで作品の詳細を確認することができます。
手書きのロゴが味があり、また白い背景を使って余白を十分にとり、四角い画像をそのままベタ張りする様子は、最近話題のブルータリズムとも通じるところがあります。
フィルターボタンを使って画像を絞り込みできるのは、秀逸なUXを実現していると言えるでしょう。
2. Hadrien Louis Baïdez
[Hadrien Louis Baïdez]さんのポートフォリオサイトです。
影を効果的に使ったヒーローヘッダーの中には、文字がタイプライターを打ち込んでいるように変わるメッセージが表示され、マウスを動かすとパーティクルが動くようなインタラクティブな仕掛けが施されています。
スタイリッシュでモダンなフォント、統一された黄土色のテーマカラー、宇宙にいるような世界観、直線をうまく利用したレイアウト、どれを取っても秀逸です。
左上のメニューは固定されているのにもかかわらず一切邪魔になることがないのも、よく考えられています。
3. Maison Pourchet
[Maison Pourchet]は1903年に創業したフランスで革製品を販売する会社です。
フランスでも人気のブランドのブランドだけあり、余白を十分に取りながら、商品にフォーカスが当たるような大胆なレイアウトを採用しています。
トップページでは商品画像がいくつか並べられていますが、マウスカーソルを合わせるとふわりと上がって商品名と価格が表示されるインタラクションにも注目してみてください。
伝統的なブランドだけにセリフ書体が似合いますが、サンセリフ書体と組み合わせることでモダンで新しい時代に対応している印象も合わせて与えることに成功しています。
4. Angström
Angströmは2011年に設立されたデジタルクリエイティブエイジェンシーです。
左側にエレベーターメニュー、中央にハンバーガーメニューを設置し、さまざまなUIにマイクロインタラクションが取り入れられています。
左上にあるロゴは時折可愛らしいアニメーションが表示されるとともに、明確には別れていませんがスプリットスクリーンのように左右にパートが別れており、左側には2人のこびとがアニメーションで動き出します。
5. Boulangerie La Parisienne
Boulangerie La Parisienneはパリに6店舗構えるフランスパンのブーランジェリーです。
熟練のパン職人たちが焼いたパンをすぐにでも食べたくなるように、トップページからパンを焼いている写真を全画面で表示します。
ロゴには極細のサンセリフ書体に稲穂のマーク、そしてその下には創始者のMickaël Reydelletさんのサインが記されています。
余白を十分に取りながら、ときにグレースケールの写真を使い、また焦げ目をつけた美味しそうなパンの写真がカラーで登場します。
配色も、基本的には白と黒、UIに部分的に茶色を使うことで、シンプルに仕上げています。
6 SHIFT Paris
[SHIFT Paris]はパリのアムステルダム通り近くに建設された複合施設で、オフィスフロアも備えた、ガラス張りが印象的なモダンな建物です。
インテリアはもちろんのこと、エクステリアも非常に魅力的で、壁にはアントレプレナーにぴったりなウォールデザインも施されています。
トップページでは、マウスカーソルを合わせるとほかのメニューが暗くなり、マウスカーソルが合わさった部分だけライトアップされるようなインタラクションが採用されています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
- ヘッダー
- WEBページの上部スペースに位置し、どのページが開かれても常に共通して表示される部分です。ヘッダーの役割は、まずWEBページを目立たせ、ブランドイメージを訴求することにあります。会社のロゴなども通常はここに置きます。また目次となるメニューを表示し、自分が今どのページにいるかを分からせることもあります。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- トップページ
- インターネットのWebサイトの入り口にあたるページのことをトップページといいます。 一般的には、階層構造を持つWebサイトの最上位のWebページをさします。サイト全体の顔としての役割も果たすため、デザインなどで印象を残すことも考えたサイト作りも有効となります。
- インタラクション
- 交流、相互作用、対話などの意味を持つ英単語で、ふたつ以上の存在が互いに影響を及ぼしあうことです。ITの分野においては、主に人間とシステム(コンピューター)の間の情報のやりとりのことを指し、人間の操作や入力に対するシステムの反応や出力(アクションとリアクション)、対話的な操作方法、の意味で用いられることが多いです。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング