以前まとめた、在庫を持たずにオリジナルデザインのグッズを作成･販売できるWebサービス。
まとめきれなかったものや、新しく登場したものが出てきたので、それらを今回はご紹介したいと思います。
自分だけのグッズを簡単&気軽に作りたい。そんなクリエイタ―さんやデザイナーさんのご参考になれば幸いです！
↓こちらでもグッズ作成サイトをまとめています!
オリジナルグッズを作って販売できるWebサービスまとめ その1
続きを読む 在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめ その2
身近なカトラリーから日本の伝統工芸品まで。
熟練の手仕事で製作されている日本全国の職人たちのサイトをまとめました。
今回取り上げたサイトデザインの多くは、全体的に余白を大きくとり装飾を抑えたシンプルなレイアウトで、その分大きく配置した写真で製作物の美しさを際立てたものになっています。
またコンテンツのひとつひとつが興味深く、それは読みふけっていると時間が経つのも忘れてしまう程。
製作物はもちろん、それを作り出す職人や製造に使う道具、製造行程や現在までの歴史など…お時間あるときに、ぜひ隅から隅までご覧ください。
※以下は2016年5月31日現在の情報です。
新潟県燕市の鎚起銅器製造業。
銅板を金槌で打ち起こしながら形作っていく「鎚起銅器」の国内唯一の産地だそうです。
鎚起でできた鎚目のような背景パターンは時間経過でわずかに色が変化し、鎚起銅器のやわらかな輝きが表現されています。
http://www.tsubamesanjo-trade.com/jp/
こちらも同じく新潟から。
古くから「ものづくり」のまちとして金属加工業を営んできた、燕三条の情報発信サイトです。
緑の面と線で区切られたぱきっとしたレイアウトに、現代的なカトラリーがよく映えています。
兵庫県のフローリング製作業会社。
創業当初は社名の通り、洋酒用熟成樽の製造をされていて、後にその技術を活かし現在のフローリング業を営むようになったそうです。
秋田県にある樺細工の製造・販売会社のサイト。
樺細工とは山桜の樹皮を使用した伝統工芸品で、風合いが独特で美しいです。
茶筒をはじめお盆や箸置きなど、伝統的なものから現代的なデザインまで様々なバリエーションで製品展開されていました。
ページ内の区切りとして使用されているパララックススクロールに、重なりを強調したシャドウがさりげなく入っていて、ページをめくるような心地よさがあります。
http://www.hello-woodpecker.com/
岐阜県の木製品製造・販売メーカー。
まな板・しゃもじなど、木製品を中心に作られています。
トップページの動画は必見。フリーハンドでなめらかに切り出されていくのはまさに職人技で、思わず見入ってしまいました。
白に近いベージュとチャコールグレーの優しい配色や、ぴょこっと飛び出すような楽しいアニメーションで、「人に寄り添う」ような親しみやすいサイトになっています。
岐阜県の陶磁器の窯元。
ロゴの丸いモチーフが所々に配置されていて、サイトの中のワンポイントになっています。
特に製品ページで感じたのですが、全体的にシンプルなレイアウトの中で、写真のトリミング・テキストの置き方などで各ページのコンセプトに合わせた見せ方になっているのがとても勉強になりました。
http://www.yaegaki.co.jp/sake/
兵庫県の酒造メーカー。
白い背景に大きく配置されたタイポグラフィーからはじまり、個性的にトリミングされた写真が印象的なサイトです。
各企業がそれぞれに趣向をこらした採用サイト。それは普段目にするベーシックなコーポレートサイトとはひと味違い、個性的で見応え抜群です。
今年も2017年度の新卒採用が続々と公開されています！
その中でも特に印象的だったサイトをまとめてみました。
※以下は2016年4月28日現在の情報です。
新卒採用2017 | GMOペパボ株式会社
https://pepabo.com/recruit2017/
シミュレーションゲーム形式で、実際の社員さんの一日を楽しく体験することができます。（はじめに「さようなら」を連打してしまった人は私以外にもたくさんいるはず）
この臨場感のあるサイトは、リアルな一日の流れを知りたいという、昨年の内定者の声から生まれたそうです。
そんなサイト作成の裏側が↓で公開されていますので、こちらもぜひ合わせてどうぞ！
ペパボの新卒サイトはこうして作られた！
2017年度新卒採用情報 -加藤憲ホールディングス株式会社
http://www.ktk-hd.com/recruit/
ちょこちょこと動く文房具モチーフの遊園地が可愛い！
マウスオーバーのアニメーションなど、細かいところまでこだわりを持って作られているのを感じました。
色使いもカラフルで、キャッチコピーのとおり「ワクワク」したサイトになっています。
MAKE | 中央電力株式会社 採用サイト
http://www.denryoku.co.jp/recruit/
直線的な幾何学模様で、一見シャープに見えがちですが、ロゴカラーの「緑」や「黄色」をベースにした配色や、手書き文字を使用することで、ほどよい柔らかさのある親しみやすいデザインになっています。
エイム株式会社新卒採用サイト
http://www.aim-info.co.jp/recruit/
紺色を基調とした、シンプルでシャープなデザイン。
マウスオーバーなどのアニメーションからスピード感も感じました。
業務の1つとして自動車開発があるので、そこから派生した「動きのデザイン」なのでしょうか。
新卒採用情報 | NTTデータ先端技術株式会社
http://www.intellilink.co.jp/recruit/index.html
斜めのラインを用い、こちらもシャープなイメージのデザインです。
メインに使用されている写真が影が強調されているもので、まさに「GEEK Fiters」という「仕事人」のかっこよさが出ています。
短いのであっという間ですが、トップ表示時のアニメーションもかっこいい！
東急エージェンシー 2017採用サイト | Tokyu Agency Inc.
http://www.tokyu-agc.co.jp/recruit/2017/special/top.html
三角形を組み合わせで、文字やあしらいを表現。
くしゃっと崩れて再生される文字が、みていて気持ちいいです。
株式会社LITALICO 新卒採用情報2017
http://litalico.co.jp/recruit2017/
こちらも三角形をモチーフにしたデザイン。カラフルな色使いで全体的にポップな雰囲気になっています。
ADK RECRUIT 2017
https://www.adk-recruit.jp/
本来選ばれる方の応募者が、逆に面接官を選んでしまうという「相棒採用」なる、ユニークな採用方法がとられています。
写真を隙間なく配置したトップは、インパクト大！
ニチイ学館 新卒採用サイト
http://nichii-saiyo.com/2017/
サイトのコンセプトになっている矢印はトップはもちろん、ページのいたるところに用いられています。
トップのだんだん接近していく、スクロールでのページ変化はダイナミック！
ほぼ全てのページがそのページ独自のレイアウトになっているので、すみずみまで見応えがありました。
株式会社クラーチ | 2017年度新卒採用 | Kuraci Recruit 2017
http://www.kuraci.co.jp/recruit/
金と紺をポイントに使用した、上品なイメージです。
コンテンツの背面に淡い色をさりげなく引いてあるのも素敵。
枠にとらわれていない文字や写真のレイアウトは、まるで「動く雑誌」のようです。
ソニーミュージック新卒採用2017
http://saiyo.sme.co.jp/graduate_17/#（´-`）.｡
ちょっと変わったURL…ぜひサイトにいってその変化をみてほしいです。
多数使用していても、そこまでチカチカしない配色は参考になります！
いよいよ今日で3月も終わりですね。
全国では桜が咲き始めていて、新潟でも開花が待ち遠しい今日この頃です。
さて、今回はPhotoshopの小ネタのご紹介。
先日のとあるデザイン案件で、スピード感のあるイメージを出したいものがあったのですが、その時にしたPhotoshopの加工をメモがわりに残していこうと思います。
サンプルとして、今回使用するのはこちらの写真。
それを↓のように加工していきます。
まず加工する画像を開いたら、画像レイヤーを複製しそれに「ぼかし（移動）フィルター」をかけます。
今回は「角度0°」「距離75px」で設定しました。
レイヤーマスクや消しゴムなどを使い、ぼかし具合を調整します。
これだけでも画像によっては十分なのですが、今回はさらに集中線を追加していきます。
新規ファイルを作成し、背景レイヤーに「ノイズ」を加えます。
このとき「グレースケールノイズ」のチェックを忘れずに！
さらに「スクロールフィルタ」をかけていきます。
水平方向に+2000px、「端のピクセルを繰り返し埋める」を選択すると、↓のようなランダムな平行線が描かれます。
この画像を、先ほどのぼかし加工を加えた画像の上に別レイヤーで重ね、レイヤーの描画モードを「スクリーン」に設定します。
レイヤーマスクを使用し、表示する部分を調整して完成です！
一手間で、簡単に躍動感やスピード感をプラスできるこちらの加工。
何かちょっと表現を足したいな、なんてときにぜひお試しください。
WebサイトやアプリUIなどの、設計やデザインの共有に役立つデザインカンプ。
弊社ではまず、一枚絵の状態のカンプ作成から始めるパターンが多いのですが、大まかなページの動きも合わせて伝えられたら…というのを常々思っていました。
コードを書くのがあまり得意ではない、私のようなデザイナーでも簡単に使える
プロトタイピングツールを探していたのですが、
そんな中、先日Webクリエイタ―ボックス様で無料で使えるモバイルアプリ制作用のプロトタイピングツールというまさにタイムリーな記事が！
その中でも、おすすめされていたMarvelというブラウザアプリがなんだか使いやすそう…。
実際に試してみて、わかりやすく、そして本当に簡単にプロトタイプができましたので、今回はMarvelの基本的な使い方をご紹介したいと思います。
基本無料で
などが可能です。
その他、有料プランでできること
続きを読む モバイルアプリに！Webサイトに！Marvelで簡単プロトタイプ作成
以前の記事で、Illustratorのブラシを使用した手描き風の線をご紹介しました。
今回は「不透明マスク」を利用した、塗りを手描き風にみせる方法をご紹介します。
まずオブジェクトを選択後、透明パネルの「マスクを作成」をクリックし「不透明マスク」を作成します。
右側の黒い四角形をクリックし「不透明マスクの編集」モードに。
「クリップ」のチェックを外します。
できるだけガサガサしたブラシを選択し線の色を黒（K100）にした状態で
オブジェクトの上をなぞります。
今回はブラシライブラリの「アート_木炭・鉛筆」から下のブラシを使用しました。
なぞった部分が透明になり、アナログのがさがさした塗り残しのような表現ができました。
透明パネルの左側の四角形（オブジェクトが表示されている方）をクリックすると
編集完了です。
イラストだけではなく記号や線などに使っても、アナログ感のあるちょっとしたあしらいにできるのでおすすめです。
簡単な一手間でできるものなので、ちょっと違った表現を取り入れたいときなどに
ぜひお試しください。
myThingsとはApp StoreとGoogle playで配信されているモバイルアプリで
トリガーとアクションを設定することで、「何か」をすると「何か」がおこる
機能としては、以前当ブログでもご紹介したWebサービス「IFTTT」によく似ているWebサービスです。
IFTTTを使っていろんなサービスと連携(例えばTwitterからFacebookにアルバムを作る)
my ThingsではWebサービス同士だけではなく「ともだち家電」や「Fitbit」などのIoTプロダクトにも対応しています。
対応チャンネルの一覧はこちら
TwitterやFacebookをはじめとしたSNSから
Yahoo!JAPANが運用するヤフオク！やYahoo!知恵袋など独自のチャンネルにも対応しています。
IFTTTと比べるとチャンネル数が少ないように感じますが
日本語に対応していることで、プッシュ通知がより直感的に利用できるのではないかと思いました。
この他、独自で開発したIoTデバイスとmy Thingsを連携させた組み合わせも可能ということで
今後いろいろな活用方法が出てきそうですね。
実際に使ってみて、設定方法も簡単でしたので
手順に沿って、基本的な使い方をご紹介します。
今回は
「特定の地域に雪が降る」ときに「平日の6時」に「プッシュ通知」する
という組み合わせを設定しました。
まず、myThingsの利用にはYahoo! JAPAN IDが必要ですので、あらかじめ取得しておきログインします。
ホーム画面の「右上のボタン」をタップし「組み合わせ作成」ページを開きます。
トリガーをタップし、チャンネルを選択。
今回は「天気・災害」を選択します。
「特定の天気だったら」をタップし、天気と地域を選択します。
アクションをタップし、プッシュ通知を選択します。
「メッセージ」を入力します。
これはプッシュ通知で通知される項目です。
自由入力の他、「地点名」「日付」などをタップすると独自タグが入力されます。
「実行タイミング」を「7時」に、「曜日指定」の「毎日曜日」と「毎土曜日」のチェックをはずし、組み合わせの名前をわかりやすい名前に変更後「作成」をタップすると組み合わせが作成されます。
※「実行タイミング」は指定をしない場合15分ごとに通知されますので、天気予報などの場合は時間指定をしておきましょう。
今回は1から組み合わせを設定しましたが、特集ページにはあらかじめいろいろな組み合せが紹介されています。
こちらをベースに作成するとよりお手軽に作成することができますので、よかったらお試しください。
さて、このAGN Web Teamブログも、おそらくこの記事が今年最後の更新です。
2016年も引き続き当ブログをよろしくお願いいたします。
それではみなさん、よいお年を！
前回botを使った定期ツイートの方法をご紹介しました。
Twitter botを簡単&無料で作成！MAKEBOTを使ってみました
テキストだけのツイートだとあれで十分なのですが
通常のツイートのように、画像付きでもつぶやけないのかな〜と思いまして
ちょっと調べてみました。
すると、一度投稿した「画像付きツイート」を使うと手軽にできるという情報が！
こちらを参考にさせていただきました。ありがとうございます！
つまり、botでも反映できる「画像URL」をツイート登録画面に貼付けると
画像付きでbotがつぶやいてくれるようなのです。
「画像URL」の取得方法は色々あるようですが、
自分でやってより手軽だった方法を、今回はご紹介します。
※今現在（2015/12/20）では、一度もつぶやいていない内容の「画像URL」は取得できないようです。
Twitterで画像付きでつぶやき、そのツイートの「ツイートアクティビティ」を表示します。
テキストの下に表示してある「pic.twitter.com/〜」で始まるURL。この「画像URL」をコピーします。
botの「つぶやき登録」の欄にURLをペーストすると完了です。
ちなみにこの画像URLは、Twitterの仕様変更にともない
表示される場所がこれまでに何度か変わっているようです。
今回ご紹介した方法は記事執筆時（2015/12/20）の情報ですので、ご了承の上お試しください。
AGN Webチームで使用しているこちらのTwitter。
これは！と思ったものや、また読み返したい記事を
半分私的なメモ代わりにツイートするのが中心のアカウントになっています。
あとは打合せ先や、社内のできごとなどなどなど…
その他に、過去のブログ記事や制作事例なども交えて、
ちょいちょいツイートするようにしているのですが
手動でやっていると、自分の仕事のつまり具合でツイートする数がバラバラに…
なので、定期的に少しずつ流したいものは、botでできたらいいな〜
なんて思ってたのです。
Twitterを利用している方にはもう当たり前のように浸透しているbot。
定期的に決められた頻度や時間にツイートしたり、自動返信なんかもしてくれるあれです。
キャラクター系botや時報botなんかが有名ですよね。
でも、作るとなるとなんだか難しそう…
プログラムがかけないと厳しいのではないかと、二の足を踏んでいたのですが
調べてみると、無料でできる簡単なbot作成ツールがいろいろあるらしい…
代表的なものだと、
機能的な制限はそれぞれのサービスによって様々ですが、
日本製の無料のものでもいろいろあるみたいです。
作成にあたってbotにしてもらいたいことをまとめると
↑のことが簡単に実装できるのと、サイトの作りがわかりやすい印象だったので
今回はMAKEBOTというサービスを使ってTwitter botを作ってみました！
続きを読む Twitter botを簡単&無料で作成！MAKEBOTを使ってみました
在庫リスクなし！オリジナルグッズを作って販売できるWebサービスまとめ
オリジナルグッズ作成サービスのご紹介。
今回は、Canvath https://www.canvath.jp/を実際に使ってみました。
こちらはすでにネットショップをもっている方向けのサービス。
デザインを決めたら、自身の運営するショップサイトに掲載。
注文があったらCanvathに発注し、直接注文者へ商品を発送をしてもらうシステムです。
ちなみにネットショップサービスのBASEと連携が可能です。
詳しくはこちら
※ご利用の際はサイトの規約などをご確認ください。
※2015/10/31現在の情報です。
続きを読む より手軽にオリジナルグッズが作れる！Canvathを使ってみました。
