2015年のウェブサイトのデザイントレンド

web-design-trends-2015

2015年も4月新年度を迎えますね。年度の切り替わるこの時期はウェブサイトのリニューアルも多いと思います。今回は、2015年の注目されるウェブサイトのデザイントレンドをご紹介します。

Startup Framework

「Startup」タイプのウェブサイトは1ページで構成されたレイアウトです。主なコンテンツの内容が1ページで収まりスクロールして閲覧できるので、スマートフォンやタブレットでの閲覧にも向いています。

Startup用のフレームワーク「Startup Framework」が公開されています。デザインやコーディングの参考にもなります。

designmodo-startup-framework

Fixed Blocks

「Fixed Blocks」タイプはメニューやナビゲーションなどを固定するレイアウトです。こちらもスマートフォンやタブレットでの操作を想定して、ボタンを押すと固定メニューが表示されるといった活用方法があります。

「Fixed Blocks」タイプの参考サイトをご紹介します。

buildinamsterdam

SVG

「SVG」は画像形式のひとつで、2次元ベクターイメージを扱います。主に座標の数値によってイメージを表現できること、テキストエディタ等で編集できるため、HTML内に直接記述をしたり、JavaScript 等と連携させることでアニメーションなどリアルタイムで再現できます。

またベクターデータによる画面表示では拡大や縮小をしても描写の劣化が起きないという特徴があります。

パソコン用やスマートフォン用の主要ブラウザでSVGの表示がネイティブでサポートされてきていることから今後SVGを活用したウェブサイトも多くなりそうです。

「SVG」を活用したの参考サイトをご紹介します。

justdesign

2D to 3D Photo

「2D to 3D Photo」は2Dの写真を3Dのように見せる技術です。2Dの静止画を3Dのように見ることができ、商品説明の新しい表現方法として期待ができます。

「2D to 3D Photo」を活用したの参考サイトをご紹介します。

bmw-special

outletpeak

関連記事

【JavaScript】ページ内リンクでページスクロールを実現する「smoothScroll.js」

「smoothScroll.js」は、ページ内リンクでページをスクロールを実装できすJavaScriptライブラリです。jQueryを実装していない状態でも稼働するので、手軽に導入できます。 基本的な使い方 導入は簡単、ライブラリを読み込むだけで実装でき、設置後は...続きを読む

2018.02.27HTMLコーディング

【HTML】Font Awesome 5 をWEBサイトに組み込む方法

Font AwesomeはWEBサイトにも組み込むことができるアイコンフォントです。現行の最新バージョン(Version 5.8.1)では、無料版で1,513種類、有料版で5,097種類ものアイコンが利用することができます。アイコンは矢印やインターフェースで利用でいる記号、SNS...続きを読む

2019.04.24HTMLコーディング

静岡洋館巡り「旧マッケンジー住宅」フォトギャラリー

国登録有形文化財「旧マッケンジー住宅」を見てきました。旧マッケンジー住宅は、明治から昭和初期にかけて活躍した建築家のウィリアム・M・ヴォーリズによる設計です。現在にでも通じるシステムキッチンや浴室があり、70年以上前とは思えないほどの設備が整っています。 概要(引用) ...続きを読む

2015.04.06フォトギャラリー

【WP】オリジナルショートコードの作り方

WordPressでは、shortcodes(ショートコード)という簡単な記述で、事前の用意された処理コードを実行することができます。 ショートコードを作成する ショートコードの作成はPHP関数の基本的な必要になりますが、オリジナルのショートコードは簡単に作成すること...続きを読む

2015.02.24WordPress

【WP】空き状況を表示するカレンダーを作成することができるBookingプラグイン5選

レストランやホテル、イベント会場などWEBサイトで、席の空き状況をカレンダーに表示して予約をスムーズに行う仕組みを見かけることがあると思います。 この空き状況を案内するカレンダーをWordPress上で作成することができるプラグインがありますのでご紹介します。 今...続きを読む

2015.02.26WordPress