とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】


今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り


ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加


ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み


これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除


逆に親テーマのCSSで不要なCSSを読み込みたくない時に。

$handle探すのに手間取ったりもしますが。。

ダッシュボード関連


自動で入力されるPタグを入れない。


記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加


追加したら利用したい場所に


投稿の画像相対パスを絶対パスに書き換え


ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。

パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード


これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。

自分ではあんまりショートコードは使わないんですけど。

いろいろな人が使う場合はあると重宝することがあります。

小ネタ


Advanced Custom Fieldsで画像のパスを取得(ID利用)


基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。

画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想


簡単なものばかりですけど。

最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。

固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


Illustratorで手描き風【水彩画風の塗り】

170131_06
 

ブラシを使用した線を使った手描き風の表現「不透明マスク」を使用したがさっとしたラフな塗り表現など、Illustratorを使用した手描き風の加工をこれまでご紹介してきました。
今回はIllustratorだけでできる、水彩画風の表現方法です。

170131_13
とある案件のデザインをしていたときのこと。
基本はIllustratorのベクターイラストなのですが、塗り方だけ水彩画のような表現ができないかとの指示をいただきました。

なにかいい方法はないかと探していたところ、3倍早くなるためのDTP講座 様こちらの記事で紹介されていた方法がとても参考になりました。
自分なりに試してみたものを、覚書として今回記事として残しておきます。

続きを読む Illustratorで手描き風【水彩画風の塗り】


WordPressの投稿画面をカスタマイズしよう!!

どうもKazです。
実は、画像加工の記事を準備していましたが
もう少々お待ちいただくとして…

今回は、Wordpressの管理画面にCSSを当てるコツを
自分への備忘録としても書きたいと思います。

一番カスタマイズを必要とするところと言ったらカスタム投稿部分になるかと思います。
そして、だいたいお決まりでAdvanced Custom Fieldsプラグインをインストールしていると思いますので、プラグインを使う前提で説明いたします。

まずは管理画面で専用のCSSを読み込むようにします。

functions.phpへ

※「admin_enqueue_scripts」が管理画面への指定になっていますので、管理画面以外ではこのCSSが読み込まれません。


これで管理画面にCSSファイルを読み込ませることができましたので
マークアップの説明に移ります。

基本的に管理画面全てに読み込まれますので
CSSのリセットから書体の指定まで行うことができます。

カスタム投稿部分のみ指定する場合ですが、
Advanced Custom Fieldsプラグインを使うと、入力ページのbodyタグに
■ bodyタグ 「post-type-[ポスト名]」
のタグが付きますので、基本的な設定はこのタグを基本に行うと良いでしょう。

また、各入力項目タイトルと入力項目を1セットとして
■ 入力項目エリア 「field_key-field_[英数字]」
と言うクラスが振られていますので各項目ごとの設定は、このタグを指定してみてください。
一括で指定する場合は「label」にスタイルを設定してもいいです。

入力項目には
■ 入力項目 「acf-field-[フィールド名]」
と言うidが振られますので、CSSを当てやすい感じになります。
もしくは「input」に対して設定をしてもいいです。

背景画像なども使っていくと、初めての方でも入力しやすい登録画面ができますし
レスポンシブなスタイルにも対応できますので
一手間加えて使いやすい画面にしましょう!!


背景画像を下に落とす。昔のサイトをレスポンシブに対応させる時

blog170112
今更ですが新年明けましておめでとうございます。
本年もAGNチームブログをよろしくお願いいたします。

さて、今年1発目は軽い小ネタから。いきなり重いと胃もたれしちゃいますからね。
昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。

【DEMO】


固定幅の頃


昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。
ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。
※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。

そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。
それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。
※全面に背景を引きたくてbacground-size : cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。そう、角丸を画像で組み立てていた頃に近いですね…

実際にやってみる


考え方はよくあるレスポンシブWebデザインの考え方でいきます。
メディアクエリで振り分けて、左側 (右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。よくあるやつですね。

方法1:背景画像じゃなくて擬似要素で配置する。


background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。
それで擬似要素をdisplay: block;にでもしておけば勝手に下に落とせますからね。
ただこのやり方だとうまくいかない場合があるのです。

contentプロパティで配置された画像はサイズの調整が難しいのです。
というのも、contentプロパティで配置された画像はサイズの指定ができないのです。
擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。
これ、画像が見切れます。
さて、困った。

この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。

方法2:背景画像でいく


今日触れたいのはこちら。
背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。
方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。

この方法のメリットはデバイス幅が変わっても比率を維持できる点です。

領域を確保する


領域を動的にpaddingを使って確保するためにpaddingを%で指定します。
この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。
画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。

どういうことかと言いますと、
例えば画像サイズが800 × 600だったとします。
これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに
(600/800)*100%を指定してあげるのです。

これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box’s containing block.

パーセンテージは、 ‘padding-top’と ‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。
マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

https://www.w3.org/TR/CSS2/box.html#propdef-paddingより引用


大事なところは、
生成されたボックスの包含ブロックの幅に対して計算されます。
ここです。
計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。
包含ブロックの幅を元に計算するので上の式でいけるんですね。
画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。
これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。

そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。

【DEMO】


蛇足ですが…


ちょっとハマったのが、iOSでbackground-size: cover;がうまくいかなかったことです。
これはbackground-attachment: fixed;と一緒に使っているとダメみたいです。
背景固定して全面画像みたいなことができないじゃないか…

ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。
background-attachment: fixed;で背景固定して、background-size: auto 100vh;で。


【たくさんのタブをすっきり整理整頓!】Webブラウザ Vivaldiを使ってみてる

161227vivaldi00
 

常時立ち上げていたいチャットツールやメモツール。
進めている案件の関連サイト。
勉強用のWeb系ブログ。。。。

いろいろなWebサイトをみていると、いつのまにかブラウザのウィンドウやタブがデスクトップに散乱してしまう、sakaiです。。

複数立ち上げていると、探す手間がかかったり、他のタブに気を取られて作業が中断してしまったりとあまりいいことはありませんよね。

今回は、タブの整頓にとおすすめしてもらった「Vivaldi(ヴィヴァルディ)」というWebブラウザをご紹介します。

Vivaldi(ヴィヴァルディ)とは


 

161227vivaldi01

https://vivaldi.com

Vivaldi(ヴィヴァルディ)は、Vivaldi Technologiesによって開発されているウェブブラウザである。

Vivaldi Technologiesは、オペラ・ソフトウェアの創設者の一人でありCEOであったヨン・スティーブンソン・フォン・テッツナーによって設立された。”A new browser for our friends”(私たちの友人のための新しいブラウザ)をスローガンとしており、技術者、インターネットのヘビーユーザ、OperaのレンダリングエンジンがPrestoからBlinkへと変更されたことに伴い多くの機能が削除されてしまったことに不満を抱いているかつてのOperaユーザを主な対象としている。

(引用:Wikipedia)


以前のOperaの機能を世襲したブラウザなんですね〜。

Operaを一時期使用し使用レビューを書いたこともありましたが、残念ながらメインで使用することなく、結局Chromeに落ち着いてしまった経緯があるのですが、
また縁あってOpera由来のブラウザにお世話になる日がくるとは。。

ということで、期間にして2ヶ月ほど。Vivaldiをメインブラウザとして使ってみて、ぜひおすすめしたいところ、逆に残念に思ってしまったところをあげてみました。
少し長くなってしまったので、ご興味のあるところからどうぞ。

続きを読む 【たくさんのタブをすっきり整理整頓!】Webブラウザ Vivaldiを使ってみてる


テクニック不要!! レイヤー2枚で写真を仕上げる!!

どもっ。Kazです。
この時期から忘年会や新年会などで人と会う機会がいっそう増えてきますよね。
人が集まるとスマホやデジカメで写真を撮ってデータを渡す機会も多いかと思います。

撮影した写真を後になってチェックしてみると
暗かったり、悪くはないけど今ひとつだったりする写真が多くないですか?

そんな写真を約レイヤー2枚で「いい感じ」に仕上げる方法を紹介します。
この方法なら多くの写真を割と早く仕上げる事も可能です!!

では、いってみましょう!!

【修正前画像】
kaz_161220_1
開いた直後です。ちょっと暗めですよねー
※今回の方法では、RGBのデータで行ってください。

【レイヤー1 スクリーン!!】
kaz_161220_2
背景レイヤーをコピー&ペーストなどで背景のコピーを作って描画モードを「スクリーン」にします。
だいぶ前に書いた事がありますが、写真を明るくします。
まだ暗いと感じる場合は、明るく感じるまでレイヤーをスクリーンで重ねていきましょう。
ただ、この「スクリーン」で重ねていくと明るくなる反面、色が薄くなっていきます。
暗い写真を明るくした場合も彩度が低い状態になります。
そこで、もう一枚背景レイヤーを使います。

【レイヤー2 オーバーレイ】
kaz_161220_3
先程「もう一枚」追加したレイヤーの描画モードを「オーバーレイ」にします。
すると、黒くなるほど一気に色が濃くなり明るい所は「まっ白」く飛ぶと思います。
なので、不透明度を一旦「0%」にして徐々に上げていきます。
そうすると、薄くなっていた色がシッカリとした色になってきます。
もし、この時点で明るい部分が飛び過ぎている場合は「スクリーン」レイヤを不透明度で薄くするか
複数枚「スクリーン」レイヤーがある場合は削除するか非表示にして加減してください。

この方法で調整を行うと、トーンカーブでの調整やレベルの調整・色相彩度の調整なんかもテクニックや知識不要でできちゃいますので
アクションで各描画モードのレイヤーを作ってしまえば悩むことなく調整ができます。
最近のデジカメは色のバランスは取れていますので、色のバランス調整は必要ないことが多かと思いますが
必要な場合は、今回の調整を行って画像を統合してから「自動カラー補正」を行っても良いかと思います。

早速、手持ちの写真で試してみてください!!


CPIサーバーでマルチドメインの設定

KDDIグループのホスティングサービス、CPIサーバー(共用サーバー)を使っています。追加料金無しにマルチドメインが使えるので、同業者様には利用されているところも多いかと思います。このCPIのマルチドメイン追加が他社と比べてちょっとわかりにくいというか、毎回やり方を忘れるので、控えとして書いておきます。なお以下はドメインは他社で取得済みの場合です。(お名前.comとか)

契約時のアカウントでマイページにログインします。
cpi_md01

ご契約一覧から主契約の詳細ボタンをクリック
cpi_md02

「マルチドメイン追加」のリンクをクリック
cpi_md03

「マルチドメインお申込み」の画面になります。
フローに沿って進めます。
他社でドメインを取得済みの場合は、下段を選びます。
「次の画面へ進む」
cpi_md04

「お申込み内容の入力」
追加したい取得済みドメインを入力します。
DNSをCPIの物を使う場合そのままです。
メールサーバーをCPIで使うならそのままです。
「次の画面へ進む」
cpi_md05

「オプション一覧」
オプションを選択します。SSLを使うときはここで選択しておきます。
※後から追加もできます。
「次の画面へ進む」
cpi_md06

費用の確認
必要な費用の確認です。マルチドメインの追加は無料なので、オプションを付けてなければ0円です。
あとは、「確認する」を経て、申し込みを完了します。
cpi_md07

その後、CPIより設定完了のメールが届きます。
この段階でFTPは利用可能です。
メールにネームサーバーのURLが書いてあるので、ドメイン側の管理画面で設定します。
お名前.comはドメイン設定からネームサーバーの変更を選択します。
cpi_md08

ネームサーバーのURLを入れます。
cpi_md09

暫く放置

設定ドメインにアクセスして、サイトが表示されれば完了です。

他社と比べた感想として、コントロールパネルでの追加では無く、0円で新規アカウントを追加するイメージです。
ドメイン毎に専用のコントロールパネル(ユーザーポータル)のアカウントが発行されます。

こうやって書き出してしまうと、難しい所も無く、なんてことはありません。
他社ドメインとの組合せでは設定が反映されるまで、多少時間が掛かりますので(一晩とか)、時間的余裕を持って設定した方がいいですね。


CSSだけでレスポンシブなタイムラインを作る

teamblog_title161214
先日制作した案件で、タイムライン(過去→未来)があったんですね。
こういうのです。

timeline161214
デザインがイラレで来ていて、さてどうしましょうか、と。
もちろん画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。
かといって縦長の画像は作りたくない。※それなりに数があったので。
それじゃCSSだけで実装しましょ、とういうことになりました。

【DEMO】

やってみよう


条件


  • 広い画面では横型、狭くなったら縦型にする
  • 項目数は変動する
  • ポイントごとに目印をつける

もちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。
今回は基本形を元にちょっといろいろしてみました。
けどあんまりうまくいかなかった。。。
ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。
お目汚しですが、よかったらどうぞ。。。

基本形


HTML


SASS


やってること


そんなに難しいことはしてません。
displayを切り替えて、ボーダー引く場所を変えているだけです。
狭い画面では縦型なのでdisplay: block;でいいですね。ボーダーは左に引きました。
横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。)
それから親要素にtablelayout: fixed;を指定して均等に割ります。
文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。

目印は子要素の擬似要素で。
基本的には左上に絶対配置して、自分の大きさ分だけ移動(transform: translateX(-50%) translateY(-50%);)します。
最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。
現在地は専用のクラスを振って文字色を変えました。

【DEMO】にのっけた他のやつのコードも一応載せときますね。
本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。
年末進行でお忙しいと思いますが、みなさんお体に気をつけて頑張っていきましょう!

HTML


SASS


SNSのトップを知る!!

kaz_161129_top

どうも、Kazです。
SNSは何を使っていますか?
そして、そのSNSで最も人気がある『アカウント』は何か…
気になった事はありませんか?

情報の拡散などで使われるSNSですが、トップになるからにはそれなりの理由があるはずです。
その『もっとも人気のあるアカウント』を見て調べることで気づくこともあると思います。

そこで
Facebook、Twitter、Instagramの「いいね!」や「フォローワー数」でのランキングがわかるサイトを紹介いたします!!

続きを読む SNSのトップを知る!!


魅力的な演出盛りだくさん!クリスマスプロモーションWebサイト 2016

ハロウィンが終わったと思ったら、次はもうクリスマス!一大イベントに向けて、早くもクリスマス仕様のWebサイトやページが続々公開されています。
普段よりも華やかにドレスアップしたWebサイト。魅力的なデザインを一足お先に、チェックしてみました。

ミキハウス クリスマスサイト



https://www.mikihouse.co.jp/christmas/

赤・白・ピンクのベースカラーのグリッドが、ぎゅっと詰め込まれたギフトボックスのよう。子ども服のブランドですが、贈る側の大人もぐっとくるシックなデザインですね〜。ギフトの詳細ページは左右2分割の縦スライダーで、くるくる互い違いに回る動きが楽しいです!
※レスポンシブデザイン

クリスマス 2016 – ロイヤルコペンハーゲンジャパンオンラインショップ



https://www.royalcopenhagen.jp/christmas2016/

ロイヤル コペンハーゲンのある風景とともにクリスマスギフトを紹介されています。メインカラーのグリーンを基調に金色をアクセントとした、全体的に高級感のあるデザイン。キャッチコピーのリボンのアニメーションが、可愛らしいアクセントになっています。
※レスポンシブデザイン

三越伊勢丹グループ「こころに太陽を呼ぶ、祝祭。」



http://cp.miguide.jp/christmas-journey/

闇に浮かぶオレンジ色の「スカイランタン」が印象的。明朝体のコピーも力強く、目を惹きつけられます。クリスマスを「こころに太陽を呼ぶ、祝祭。」とし、太陽をモチーフとしたあしらいや色彩でページを彩っています。あえてバックを暗色にさせていることで、より光が引き立っているところもまたすてきですね。コンテンツの開閉も、ちょっと楽しいアニメーションになっています。
※レスポンシブデザイン

土屋鞄のクリスマスギフトサイト|土屋鞄製造所



http://www.tsuchiya-kaban.jp/c/2016xmas.php

シンプルなツリーに、星座がきらめくシンプルなメインイメージがすてき。クリスマスまでのカウントダウンにもわくわくしてきますね!
取り扱っているギフトは、鞄や財布などの革製品。革の絶妙な光沢が映えるような、濃紺や深緑などの落ち着いた配色でまとめられています。
※レスポンシブデザイン

Your Tree 大切なひとへ、ツリーを贈ろう。|土屋鞄製造所



http://www.tsuchiya-kaban.jp/event/2016xmas_yourtree.php

こちらも土屋鞄製造所さんのクリスマスサイト。ランダムで作られるツリーに添えて、ちょっとユニークな一言メッセージを送れるサービスです。
ぴょこぴょこ動くサンタのおしりが可愛い!

TOKYU CHRISTMAS WONDERLAND 2016 – Disney CRYSTAL MAGIC


28

http://crystalmagic.jp/s/tokyu/

ラインと絶妙な濃淡で表現された、クリスタルのイメージが美しいです。
ボタンやページトップのホバーアニメーション、ゆっくりと変化するクリスタル調の背景など、細かいところまでこだわりを感じるデザインです。
※レスポンシブデザイン

あかりを灯そう マザーハウスのクリスマス2016|MOTHERHOUSE


29

http://www.mother-house.jp/event-campaign/xmas/

町に立ち並ぶ家が、なんとギフトボックスに。ふわっと広がる灯りの表現や、微妙な濃淡が重なる淡い色彩が、とてもやさしいサイトです。
他にもタイトルロゴやワンポイントのツリーなど、すみずみまで可愛らしいあしらいに溢れています。
※レスポンシブデザイン

HAPPY HOLIDAY|PARCO


04

http://parco.jp/gift/

油絵調のイラストに迷い込んでしまったような、可愛らしいけどちょっと不思議な世界観のデザインです。実写とイラストが混じり合う、イメージビジュアルもすてき!

アガット | agete


05

http://www.agete.com/2016christmas/

セピア調の繊細なタッチで描かれたイラストが美しいです。ウィンドウ内でページが完結するレイアウトで、メニューの配置がちょっと珍しく感じました。
商品ページも同じくセピア調でまとめられ、ゆっくりと降る雪のアニメーションやラインの飾り枠が、華奢で繊細なアクセサリーにとてもマッチしています。
※レスポンシブデザイン

HOLIDAY SPECIAL – Crafted by Hand & Heart|スターバックス コーヒー ジャパン


18

http://www.starbucks.co.jp/holiday/

動画で進んでいく、スクロールアニメーション。描くように表示されるボタンやコピー、手描き調のあしらいや、ちょっとコミカルなコマ撮りアニメーションなど。木目調の背景と相まって、全体的にほっこりと暖かいデザインイメージです。

 トマムのクリスマス~雪に願いを~|星野リゾート トマム【公式】


24

http://www.snowtomamu.jp/special/xmas/

雪原に広がるキャンドルの灯りと、満天の星空がとても幻想的ですね…!フルスクリーンと降雪のさりげないアニメーションで、その地の魅力をシンプルに演出しています。
※レスポンシブデザイン

西武・そごうのクリスマス|西武・そごう


11

https://www.sogo-seibu.jp/christmas2016/

縦組み&明朝体のキャッチコピーが印象的。くるくるとした曲線と交わるロゴタイプもすてきです。イラストで埋められたバックと、プレゼントを結ぶリボンを思わせるような赤色のバックがとてもにぎやか。

TOKYO KAIKAN 東京會舘 Christmas 2016


13

https://www.kaikan.co.jp/special/xmas/

左右2分割されたメニュー。こちらはケーキやレストランの問い合わせ先が複数あるのですが、こうして入り口から分けられていると動線がシンプルでわかりやすいですね!
赤・白・金で落ち着いた彩度の色どりで、華やかな大人のクリスマスといったイメージです。
※レスポンシブデザイン

 ルピシアクリスマス 2016


16

http://www.lupicia.com/shop/e/eX16/

お茶のオンラインショップ「ルピシア」のクリスマスサイト。クリスマスの限定ギフトに描かれたキャラクターたちが登場する、絵本「アルチザンたちの物語」が楽しめます。メインビジュアルはパララックススクロールで、奥行きのある演出がされています。
※レスポンシブデザイン

サンリオクリスマス特集2016


17

https://shop.sanrio.co.jp/special/xmas2016/

クリスマスカラーにまとめられた、シンプルなキャラクターイラストがメインビジュアル。ツリーのオーナメントになったキャラクターたちも、パララックススクロールで背景を彩ります。

終わりに



このほかにも、AGN Webチームでは気になったWebデザインを、下記のサイトでまとめてご紹介しています。

00

Web Site Clips
http://agn-websiteclips.tumblr.com/


よかったら、のぞいてみてくださいね!