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

関連記事

【HTML】Bootstrap4を使いレスポンシブサイトをコーディングする《導入編》

Twitterのデザイナーや開発者が作成した『Bootstrap』は、フロントエンドのフレームワークとオープンソースプロジェクトです。『Bootstrap』は、CSS、JS、およびフォントが基本セットになっています。HTMLのテンプレートソースを組み合わせて、レスポンシブ対応...続きを読む

2018.09.22BootstrapHTMLコーディング

【CSS】リンクフォーカスを利用したナビゲーションのボタン操作

CSSの{a:hover}を使うとマウスオーバーの操作によって背景の色や画像を変えることができます。ナビゲーションメニューなどによく使われる手法ですが今回は{a:focus}に着目してみました。 {a:focus}はリンクにフォーカスされているとき。クリックされた時やT...続きを読む

2015.02.08HTMLコーディング

美容室グランディール様折込チラシ制作

富士宮市にある『美容室グランディール』様の折込チラシを制作いたしました。お店で開催されるキャンペーン、お店の基本情報を告知するための折込チラシです。 [gallery link="file" columns="4" ids="725,726"] クライ...続きを読む

2015.03.19チラシ制作美容室

【フォント】サインに最適なフリーのシンボンルフォント

WEBサイトや印刷物のデザインにおいて、メニューやボタン、マップ上のシンボルなどに利用者にわかりやすく内容を伝えるためアイコンを用いることがあります。 ビジュアルで内容を伝えることができるシンボルタイプのフリーフォントをまとめてみました。 Heydings Com...続きを読む

2015.02.14フォント

Google Chart API でQRコードを自動生成する方法

Google Chart APIはGoogleが提供しているグラフなどのイメージを作成してくれるAPIサービスです。URLに必要な値を与えるだけで、グラフなどのイメージを返してくれます。 主にグラフなどを作成することができるのですが、その機能のなかにQRコードを作成して...続きを読む

2015.03.09HTMLコーディング