富士通商株式会社様のWEBサイトを公開
URL : https://www.fuji-trading-jp.com/
CMS : WordPress
レスポンシブデザイン
常時SSL接続
デザイン〜HTML/CSS/JavaScriptコーディング〜Wordpressテーマ化まで一括で制作。

富士通商様は業務専業商社でしたが、ここ数年で市販用が急拡大し、一般消費者の目に触れる機会が増えたため、一般消費者向け商品の販促をかねてリニューアルをしたいというご要望に沿ってデザイン〜CMSまでのご提案をいたしました。

デザイン&コンセプト

全体的なカラーは白ベースで、清潔感のある食品メーカーらしいテイストにし、ロゴで使用している赤（#F20505）をベースにグリーン系のナチュラルカラーを差し色とした配色パターンでのデザインを作成しました。

ビジュアルデザインのテイストは、業務用と一般向けとで違う形にするというご要望でした。一般向けは 親しみのある明るいテイスト。業務向けは今までのかっちりしたテイストの方向性に近い形でデザインを作成しました。

インフォグラフィック

「Festival」ブランドの認知向上のためにインフォグラフィックなども何点か作り直をし専用ページを作成。

ナビゲーション

グローバルナビゲーションはデバイス毎の使い勝手を考慮し、PC向けとSP向けで全く違うデザイン/動作になっています。この手の手法の場合、HTMLソースコードはそれぞれ違うものを用意して実現させているサイトをよくみますが、無駄なソースとなってしまいますので、こちらでは全く同じソースをCSSとJavaScriptを駆使し、動作含めて再現しています。

システム＆管理画面

CMSとしてWordpressを使用し、Gutenbergブロックエディタに対しても見た目の分かりやすさの追加やカスタムブロックによる入力のしやすさなどのカスタマイズを施しています。

株式会社サクラマチ様のWebサイトのフェーズ2を公開
URL : https://www.sakura-machi.co.jp/
CMS : WordPress
レスポンシブデザイン
常時SSL接続
デザイン〜HTML/CSS/JavaScriptコーディング〜Wordpressテーマ化まで一括で制作。

フェーズ1は、トップページにコーポレートサイトとして必要最低限なコンテンツをすべて入れる形で公開しましたが、フェーズ２ではトップページのコンテンツを整理し、セカンドページに振り分けたり、さらに必要なコンテンツ追加した形で公開しました。
追加ページは、会社案内、PB商品関連、お知らせなどです。

デザイン&コンセプト

コンセプトはフェーズ2と同じく、イメージカラーとして、ピンク（#ffc4cd）を中心とし、商品の対象が対象は30代~の女性が中心となるため、大人可愛らしいイメージで作成。

会社案内などは普通の会社っぽくない、遊び心がある感じをご希望とのことで、特に会社の沿革ページなどは普通のレイアウトではない構成でデザインをし、スクロールに連動したアニメーションを加えています。

https://www.sakura-machi.co.jp/aboutus/history/

変わったレイアウトを実現するために専用のWPのGutenbergカスタムブロックを作成しています。

その他、コンテンツに合わせたカスタムブロックを何点か作成しより入力しやすいようにカスタマイズしております。

PB商品ページのレイアウトも動きがあるデザインをご希望でしたので、スクロールに連動して各商品の表示の仕方に工夫を入れています。

https://www.sakura-machi.co.jp/products/catarchives/skin-care/

株式会社サクラマチ様のWebサイトのフェーズ1を公開しました。
URL : https://www.sakura-machi.co.jp/
CMS : WordPress
レスポンシブデザイン
常時SSL接続
デザイン〜HTML/CSS/JavaScriptコーディング〜Wordpressテーマ化まで一括で制作。

デザイン&コンセプト

会社名がマイジールからサクラマチに変更になるのに伴い、サイト自体の刷新のご依頼を受けて作成しました。

ドメイン名も変更となり、お急ぎで公開をしたいとのご要望でしたので、フェーズ1とフェーズ2の2段回に分けての公開というスケジュールにて進めております。

2021年1月1日には、すでに会社としてサクラマチとして動いていたので、フェーズ1としてトップページ１ページのみで、そこに会社のサイトとして最低限必要な内容を入れて公開という形にしました。

コンセプトは、イメージカラーとして、ピンク（#ffc4cd）を中心とし、商品の対象が対象は30代~の女性が中心となるため、大人可愛らしいイメージが希望とのことで、デザインを作成しました。

また、高級感を出すためにスクロールに合わせたアニメーション（パララックス効果など）やハンバーガーメニューの表示時にアニメーションなどリズムの工夫をしています。

WordPressカスタマイズ

トップページの各コンテンツブロックは、sectionタグ、artticleタグを出力するオリジナルのinnerBlocksを作成し対応。

WPのinnerBlocksは、他のブロックを内包できるのですが、管理画面上では、どこまでがinnerBlocksで、どこまでが内包されたブロックなのかわかりづらい点があります。そのためこちらで作成したカスタムブロック では、innerBlocksに薄いボーダーと右上にどのタグで囲ったのかの表示をするように作成しています。

また、news部分は、newsカスタム投稿タイプを追加し、トップページのnews表示はオリジナルのダイナミックブロックにて表示させています。

2020年は色々なことがあり、まるでジェットコースターのようでした。

2021年は飛躍の年になると良いですね。

前回のGulp4の記事は、環境を整えるまでを書きました。
今回は、普段よく使っているパッケージを紹介します。数が多いので詳細な使い方などはそれぞれ個別の記事にしていく予定です。

gulp-sass

Saccを自動でコンパイルしてくれるモジュール。Sassを使う場合は必須のパッケージ。
使い方のサンプル例。

const { src, dest, watch, series} = require('gulp'),
    sass = require('gulp-sass');
	
const paths = {
    'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
    'css':'./www/css/',//CSSファイルの格納ディレクトリ
	}

const compileScss = (cd) => {
    src(paths.scss + '**/*.scss')
        .pipe(//sassコンパイルの設定
            sass({
                outputStyle: 'expanded',//通常のCSSスタイルの書き出し
                //outputStyle: 'compact',//行間圧縮スタイル
                //outputStyle: 'compressed',//圧縮の書き出し
            })
                .on('error', sass.logError)
        )
        .pipe(dest(paths.css));//CSSの書き出しディレクトリ
    cd();
}

gulp-sassの書き出しで圧縮（minify）することができますが、後述するgulp-clean-cssなどを使い、通常のCSSファイルとminify化したファイルの２つを作る方がお勧めです。

browser-sync

ファイルの変更を監視して、変更があった時にブラウザを自動でリロードするように設定ができるパッケージ。
サンプル例

const { src, dest, watch, series} = require('gulp'),
	browserSync =require('browser-sync');

const browser_sync = (cb) => {
    browserSync.init({
        server  :{
              baseDir:paths.root//HTMLページが格納されているディレクトリ
           }
    });
    cb();
}
/**
 * Browser reload
 */
const browser_reload = (cb) => {
    browserSync.reload(); //ブラウザの自動リロード設定
    cb();
}

browserSync.initでプロキシを使い、MAMPやDockerなどで作ったローカル環境のURLを指定することも可能です。

例)

const browser_sync = (cb) => {
    browserSync.init({
        proxy: "xxx.xxx.xxx", //URLなど
    });
    cb();

gulp-group-css-media-queries

別々の場所にかかれた、同じ設定内容のメディアクエリをまとめてくれる便利なパッケージ。
これは本当に便利で、開発スピードがものすごく上がります。

＊gulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。

gulp-autoprefixer

CSSベンダープレフィックスを自動でつけてくれるパッケージ。ベンダープレフィックス地獄から解放されます！

＊こちらもgulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。

gulp-clean-css

スタイルシートを圧縮（minify）するパッケージです。

＊gulp-sassの処理の中でpipe関数を使って、処理を繋げて行います。

gulp-rename

ファイルをminifyする際にファイル名を変更するのに使うパッケージです。

上記4つをgulp-sassの処理中に実行するサンプル例）

const { src, dest, watch, series} = require('gulp'),
    sass = require('gulp-sass'),
    gcmq = require('gulp-group-css-media-queries'),
    autoprefixer = require('gulp-autoprefixer'),
	cleanCSS = require('gulp-clean-css')
	rename = require("gulp-rename");
	
	const paths = {
    'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
    'css':'./www/css/',//CSSファイルの書き出しディレクトリ。
    'root':'./',//HTMLルート
};


/**
 * for SCSS Compile task
 *  
 */
const compileScss = (cd) => {
    src(paths.scss + '**/*.scss')
        .pipe(sassGlob())
        .pipe(//sassコンパイルの設定
            sass({
                outputStyle: 'expanded',//通常のCSSスタイルの書き出し
            })
                .on('error', sass.logError)
        )
        .pipe(
            autoprefixer({//ベンダープレフィックスの自動追加処理
                browsers: ['last 2 version', 'iOS >= 11', 'Android >= 6'],//ここでどのOSやブラウザのバージョンまで対応か設定
                cascade: false,

            })
        )
        .pipe(gcmq())//メディアクエリをまとめる処理
        .pipe(dest(paths.css))//CSSの書き出しディレクトリへ出力
        .pipe(cleanCSS({ rebase: false }))//CSSのminify処理
        .pipe(rename({//minifyしたファイルの名前変更
            extname: '.min.css'
        }))
        .pipe(dest(paths.css));//CSSの書き出しディレクトリ
    cd();
}

gulp-uglify-es

こちらは、JavaScriptを圧縮（minify）するパッケージです。

gulp-inline-source

CSSやJavaScriptをインライン化するパッケージ。

gulp-imageminとimagemin-pngquantとimagemin-mozjpeg

画像を圧縮するためのモジュール群。

• gulp-imagemin
  定番の画像圧縮のパッケージ
• imagemin-mozjpeg
  Mozillaが開発したJpegエンコーダーmozjpegのパッケージ。
• imagemin-pngquant
  TinyPNG並のPNGファイルの圧縮ができるパッケージ。
• gulp-changed
  変更があったファイルだけを移動させたりなどの処理を行うパッケージ。

画像圧縮のサンプル例）

const imagemin = require('gulp-imagemin'),
    pngquant = require('imagemin-pngquant'),
    mozjpeg = require('imagemin-mozjpeg'),
    changed = require('gulp-changed');
	
	const paths = {
    'src':'./src/',//developer files
    'image_src':'./src/images/',//元画像ディレクトリ
    'image_dist':'./www/images/'//画像書き出しディレクトリ
};
	
/**
 * for image minfy
 */
const image_min = (cb) => {
    src(paths.image_src + '**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(changed(paths.image_dist))
    .pipe(imagemin([
        pngquant({
            quality: '65-80',
            speed: 1,
            floyd: 0
        }),
        mozjpeg({
            quality: 50,
            progressive: true
        }),
        imagemin.svgo(),
        imagemin.optipng(),
        imagemin.gifsicle()
    ]))
        .pipe(dest(paths.image_dist));
    cb();
}

gulp-sass-glob

Sassの複数のimportを、ワイルドカードなどのパターンで一括で記述ができるようになるパッケージ。

サンプル例）

//@                             @
//@     page.scssファイル
//@                             @

@import "./object/project/**/*-st.scss";

Gulpによるコーディング環境を整える下準備 – node.jsのインストール

GulpをつかうにはNode.jsを作業環境にインストールします。

Macの場合は、homebrewでのインストール管理が有名です。
Linux系では、nodebrewもしくは、直接yumやapt-getコマンドでインストールとなります。

nodebrewを使う場合の手順

このnodebrewはとても管理がしやすくておすすめです。
Macでも直接もしくは、homebrew経由でインストールして使うことができます。

Windowsの方はこちらでは説明を省きますがNodelistが有名です。

Mac場合の準備

Homebrewのインンストール

//ターミナルで実行
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

ちなみにhomebrewのアップデートは以下のコマンドで行います。

$ brew update

homebrew経由でnodebrewをインストール

$ brew install nodebrew

Linuxの場合の準備

・CentOSの場合
まずはパッケージをアップデートしておく

$ yum update -y

・Debian/Ubuntuの場合
curlがインストールされていないケースもあるので、まずはcurlをインストール

apt-get install curl -y

nodebrewのインストールと設定(Mac・Linux共通)

$ curl -L git.io/nodebrew | perl - setup

インストール後に以下のようなメッセージが表示されます。

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH 
========================================

パスを通さないと使いづらいので、パスを通すように設定します

$ vi ~/.bashrc

——— 以下の行を追加
# Nodebrew
export PATH=$HOME/.nodebrew/current/bin:$PATH
— :wqで保存終了

.bashrcを再読み込み

source ~/.bashre

これでnodebrewのインストールが完了です。

Node.jsのインストールと設定

現在インストールできる、リモート側のNodeのバージョンリスト一覧表示

$ nodebrew ls-remote

安定バージョンのnodejsのインストールします。
単なるinstallよりinstall-binaryの方がコンパイル済みのものをとってくるので早いのでおすすめ

$ nodebrew install-binary stable

特定バージョンの場合は以下のようになります。

$ nodebrew install-binary v10.15.0

インストールされているパッケージのバージョン確認します。

$ nodebrew ls

インストールしたバージョンを使うように設定します。

$ nodebrew use v11.15.0

Gulpを作業環境にインストールする

まずは作業環境にてnpmの初期化をします。

//作業環境に移動
$ cd /project_directory/

//npmを初期化
$npm init -y

package.jsonファイルが作られます。
package.jsonにrepositoryのエラーが出ないように以下の記述を追加します。

  "name": "www",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "private": true, //←これ

次にgulpモジュールをインストールします。

$ npm istall —save-dev gulp

Linuxの場合、darwin関係の警告が出る場合があります。
これは、macOSのシステム用のオプションの警告です。
Linuxには必要のないオプションなので気にしなくても良いのですが、気になる場合は、

$ npm istall --save-dev --no-optional gulp

とすると良いです。

ターミナルでgulpのパスが通っていない場合があります。
その時は

$ npm link gulp

とタイプして通します。

その他のモジュールもインストールしていきます。

$ npm install —save-dev gulp-sass

gulpfile.jsの設定

gulpfile.jsファイルでgulpやその他のモジュールの動作設定を行なっていきます。
Gulpは、3から4になり書き方がだいぶ変わってきています。
その辺りを少しまとめて見ました。

Version 4で変わったこと

• タスクなどの関数を実行する際にコールバックが必要になったこと
• task関数が非推奨になっことまだ使えます
• series関数（直列実行/同期） と parallel関数（並列実行/非同期）という関数が加わったこと
• exportsによるタスクの登録（パブリックタスクとプライベートタスク）
• パッケージはグローバルではなく各プロジェクトごとにインストールするように

となります。
その他にもVer.3からは大きく変わっていることが多数ありますが、とりあえず上記のポイントを押させておくと良いと思います。

タスクなどの関数を実行する際にコールバックが必要になったこと

こちらは、実行関数の最後にコールバック関数を実行すればOKです。

参考URL
https://gulpjs.com/docs/en/getting-started/creating-tasks

例えば、Scssのコンパイルなどは、以下のような形で書くことができます。

/*ファイルのpath設定*/
const paths = { 'scss':'./src/scss/',//Sassファイルの格納ディレクトリ }

const compileScss = (cb) => { // 
    src(paths.scss + '**/*.scss')//SCSSファイル
        .pipe(//sassコンパイルの設定
            sass({
                outputStyle: 'expanded'
            })
                .on('error', sass.logError)
        )
        .pipe(dest(paths.css));//CSSの書き出しディレクトリ
    cb(); // CallBack実行
}

task関数が非推奨になっこと（まだ使えますが）

タスクの登録は、gulp.taskを使わずに、exportsで登録する形になります。

例）

 exports.default = series(
    browser_sync //定義した関数
  );
 exports.image_min = series(image_min);

また、watchの登録の仕方も変わります。

/*gulp.watchとseriesを変数にて定義*/
const {watch, series} = require('gulp'),
sass = require('gulp-sass');

/*ファイルのpath設定*/
const paths = {
    'scss':'./src/scss/',//Sassファイルの格納ディレクトリ
}

const compileScss = (cd) => {
src(paths.scss + '**/*.scss')
.pipe(sassGlob())
.pipe(//sassコンパイルの設定
sass({
outputStyle: 'expanded',//通常のCSSスタイルの書き出し
})
.on('error', sass.logError)
)
.pipe(dest(paths.css));//CSSの書き出しディレクトリ
cd();
}

const watchScss = watch(paths.scss + '**/*.scss', { usePolling: true }, compileScss)

series関数（直列実行/同期） と parallel関数（並列実行/非同期）という関数が加わったこと

処理を順番にする場合と、並列に同時に実行する場合など設定ができます。

Seriesの例）

const { series } = require('gulp');

const uglify_es = (cb) => {
  // body omitted
  cb();
}

const image_min = (cb) => {
  // body omitted
  cb();
}
exports.build = series(uglify_es, image_min);

Parallelの例）

const { parallel } = require('gulp');

const javascript = (cb) => {
  // body omitted
  cb();
}

const css = (cb) => {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

exportsによるタスクの登録（パブリックタスクとプライベートタスク）

exportsを使ってタスクを登録します。
以前は

gulp.task('default',〜）

としてデフォルトのタスクを追加していましたが、これからは、

exports.default = series(関数名）;

と設定をします。

次回はGulpでコーディングする際におすすめのパッケージやgulpfile.jsの具体的な書き方例などを書いていきます。

SVGアニメーション

SVGアニメーションを作る場合は、CSS3 のプロパティのfillやstroke-dasharray、stroke-dashoffsetを利用したり、transformで変形させる方法。JavaScriptを使う方方法。Adobe Animate、AffterEffectを使う方法など手段は様々です。

よく見かける、ラインを描いていくアニメーション実現する場合も上記の方法で可能です。
JavaScriptの場合、良いライブラリーがあるので、それを使うことでわりと簡単に実現できます。

有名な所ではVivue.jsで簡単にライン描画アニメーションを作ることができます。
http://maxwellito.github.io/vivus/

サンプルとして以下のようなアイコンをアニメーションさせる方法のメモとなります。

See the Pen
Vivus.js DEMO 2019.05.26 no.2 by Norihiko Takami (@sonic_cat)
on CodePen.

Vivusライブラリの読み込み設定

まずは、ライブラリーを読み込みます。

<script src="https://cdn.jsdelivr.net/npm/vivus@latest/dist/vivus.min.js"></script>

これだけでOKです。

SVGファイルの作成

次にSVGを用意します。
Illusratorなどでイラストを作成し、保存の際にSVGファイルを選択し保存します。

テキストエディタで保存したファイルを開くと以下のようなタグが書かれているかと思います。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator...-->
<svg ...>
<style>
~...
</style>
<path ...>
<path ...>
<g>
  <path ...>
  <path ...>
</g>
</svg>

ここの<?xml…>と<!– Geerate …–>の部分は必要ないので、svg以下をコピーしてHTMLファイルに貼り付けます。

styleをsvgタグ内からheadタグに移します。
styleに関しては、後ほど加工します。

CSSの調整

pathのCSS fillプロパティは塗りの設定になります。
塗りのあるpathは以下のようなCSSの設定になっています。

.st2{
  fill:#2FBAD1;
  stroke:#2FBAD1;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
}

塗りの部分はVivue自体ではアニメーションされませんので、ここは一旦noneに変更します。

.st2{
  fill:none;
  stroke:#2FBAD1;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-miterlimit:10;
}

塗りの部分は、Vivue.jsのコールバック時にCSS のOpacityをTransitionにて変化させてフェードインさせるようにします。まずは、塗り用のクラスを作成します。

.fill{
  fill-opacity: 0;
  fill:#2FBAD1;
  transition: fill-opacity 0.8s;
}
.draw .fill{
 fill-opacity: 1;
}

塗りのある該当pathに上記のfillクラスを追加します。

<path class="st2 fill" ...>

また、SVGタグ自体にVivueで使用するためのわかりやすいID属性を設定しておきます。

JavaScriptの設定

Viveuの基本的な書き方は、

<script> new Vivus(対象SVGに設定したID, {duration: 300}, callback関数); </script>

という形になります。
durationはアニメーションの速度の設定となります。

その他にもアニメーションの動きに関するプロパティがありますので、公式のGitHubページを参考にしてみてください。

公式GitHubページ
https://github.com/maxwellito/vivus

よく使うものでは、「type」「start」「duration」などです。

typeの各設定の概略

typeは、各pathのアニメーションを実行するタイミングの設定となります。

「delayed」はpathのアニメーションが実行するタイミングを少しずらしてスタートさせます。

「Sync」は全て同時になります。

「OneByOne」はpathを一個ずつ描画していきます。こちらは、ペンで一筆ずつ描いているようなアニメーションになります。

animTimingFunction

こちらは、SVGの描画アニメーションの終わるタイミングの動きの設定になります。
値は「EASE」「EASE_IN」「EASE_OUT」「EASE_OUT_BOUNCE」があります。
設定する場合は、「animTimingFunction:Vivus.EASE」などとします。

callback関数にて、Line Drawアニメーションが終わったタイミングで、fill（塗り）が行われるようにdrawクラスを追加します。

以下が上記サンプルのJavaScriptとなります。

const anime = () =>{
new Vivus('svg-animation', {start:"autostart",type: 'oneByOne',duration: 300, forceRender: false ,animTimingFunction:Vivus.EASE}, (obj) => {
obj.el.classList.add('draw');
});
}
anime();

また、もう少し複雑なラインのイラストでも簡単に行えます。

See the Pen
Vivus.js DEMO 2019.05.26 by Norihiko Takami (@sonic_cat)
on CodePen.

上記のように、pathが多く、各pathの長さがバラバラの場合は、各pathの描画完成速度を調整した方がより自然な感じになります。
その場合は、typeに「scenario」もしくは「scenario-sync」が用意されています。

上記の値を設定した場合は、pathもしくはlineタグのdata-属性にてdrationやstartのタイミングが設定できます。
この辺りはまた次回に。

出版舎ジグ様のWEBサイトを新規作成致しました。
URL : https://jig-jig.com/
CMS : WordPress
レスポンシブデザイン
常時SSL接続

デザイン〜コーディング、Wordpressの構築までこちらで一括で承りました。

シンプルなデザインがご希望とのことでしたので、できるだけ装飾はなくし、レイアウトや隙間の調整で文字や画像にリズムをつくり、見やすいデザインを心がけました。

また、フォントに関しても読み物の部分は、明朝体系で綺麗に読みやすく表示したいというリクエウトをいただきました。
PCに関しては、デフォルトでインストールされている「游明朝」では、あまり可読性がよくないので「Noto Serif CJK JP（源ノ明朝）」を使う方針に。

またWEBフォントは表示時間の問題があるのですが、今回はJavaScriptにて、遅延読み込みを行う方法+モバイルではデバイスフォントを表示させるという方法で読み込み速度を高速化するように対策をいたしております。

表示速度には気を配り、できる対策は全て行いましたので、サーバー自体はそれほど高速なものでなないのですが、Google Speed Insightでも90点台を出しています。

書籍情報などは、その書籍固有のお知らせ（イベント情報や附帯情報など）も掲載できるように、WPの入力欄もカスタマイズいたしました。

新しい年の幕開け！
今年は明るい年になると良いですね。

インテリアスタイリストのみつま　ともこ様のWEBサイトをリニューアル致しました。
URL : https://www.mitsumatomoko.com/
CMS : WordPress
レスポンシブデザイン
常時SSL接続

基本デザインはみつま様のアイディアで、タブレット/スマートフォン向けに若干のリデザインをこちらで行いました。
また、画像をたくさん使い、Worksページ含めてスライドショーにてみつま様の実績をわかりやすく表示したいとのご要望で作成いたしました。

またインスタグラムを活用したいとのご要望でしたので、Instagramグラフ APIを使いトップページ下方に、ご自身のインスタグラムに投稿された写真を表示させるようにしてあります。
こちらInstagramに関しましては、「Instagram API」の提供終了が2018年4月に前倒しで終了致しましたので、今回が初めてのInstagramグラフAPIを使った案件となっております。

こちらのAPIキーの取得設定などはクライアント様にご協力がないとできません。
みつま様には勉強もかねて、難しい作業を行っていただきました。
ありがとうございます。

また、各ページのスライドショーなどは、WordpressのプラグインACFを使い、わかりやすく簡単にアップできる仕組みにしております。