Webチームでデザイン担当をしていますsakaiです。
デザインを任せていただけるようになって早数年…にも関わらず、まだまだ勉強が必要だなんて日々感じているこの頃です。
発想の幅を広げるべく、Webデザインの引き出しを増やすために見ているもの、していることを今回はあげてみました。
最近はコーディングの方もすこーしずつ勉強しているところ。初心者向けではありますが、その勉強でお世話になっているところも合わせてご紹介します。
続きを読む 【引き出しを増やそう！】Webデザインのインプット
カテゴリー: デザイン
Macawでデザイン→即HTML化
どうも、Kazです。
この数日で面白そうなオーサリングソフトを見つけたので使ってみたのですが、「もしかしたら本気で使えるんじゃないか？」と思ってしまうくらいのアプリでしたので紹介したいと思います。
そのオーサリングソフトの名前は
「Macaw」
http://macaw.co/
記事を書いている現在では、バージョンが1.6。MacとWindowsに対応しています。
過去には有料のアプリだったようですが、Download FREEとなっています。
起動してから、いろいろとメニューを探ったのですがレジスターがないようですので完全にフリーのアプリになっているようです。
このアプリを知っている方は、恐らく2014年頃からではないでようか。
日本のサイトでこのアプリを紹介している所は少なく、とても少数派なアプリです。
熟練の手仕事で作り上げる。日本の職人Webサイトまとめ
身近なカトラリーから日本の伝統工芸品まで。
熟練の手仕事で製作されている日本全国の職人たちのサイトをまとめました。
今回取り上げたサイトデザインの多くは、全体的に余白を大きくとり装飾を抑えたシンプルなレイアウトで、その分大きく配置した写真で製作物の美しさを際立てたものになっています。
またコンテンツのひとつひとつが興味深く、それは読みふけっていると時間が経つのも忘れてしまう程。
製作物はもちろん、それを作り出す職人や製造に使う道具、製造行程や現在までの歴史など…お時間あるときに、ぜひ隅から隅までご覧ください。
※以下は2016年5月31日現在の情報です。
無形文化財 鎚起銅器｜玉川堂
新潟県燕市の鎚起銅器製造業。
銅板を金槌で打ち起こしながら形作っていく「鎚起銅器」の国内唯一の産地だそうです。
鎚起でできた鎚目のような背景パターンは時間経過でわずかに色が変化し、鎚起銅器のやわらかな輝きが表現されています。
燕三条 TSUBAMESANJO organic lifestyle creations JAPAN
http://www.tsubamesanjo-trade.com/jp/
こちらも同じく新潟から。
古くから「ものづくり」のまちとして金属加工業を営んできた、燕三条の情報発信サイトです。
緑の面と線で区切られたぱきっとしたレイアウトに、現代的なカトラリーがよく映えています。
株式会社昭和洋樽製作所
兵庫県のフローリング製作業会社。
創業当初は社名の通り、洋酒用熟成樽の製造をされていて、後にその技術を活かし現在のフローリング業を営むようになったそうです。
角館 伝四郎 DENSHIRO
秋田県にある樺細工の製造・販売会社のサイト。
樺細工とは山桜の樹皮を使用した伝統工芸品で、風合いが独特で美しいです。
茶筒をはじめお盆や箸置きなど、伝統的なものから現代的なデザインまで様々なバリエーションで製品展開されていました。
ページ内の区切りとして使用されているパララックススクロールに、重なりを強調したシャドウがさりげなく入っていて、ページをめくるような心地よさがあります。
woodpecker
http://www.hello-woodpecker.com/
岐阜県の木製品製造・販売メーカー。
まな板・しゃもじなど、木製品を中心に作られています。
トップページの動画は必見。フリーハンドでなめらかに切り出されていくのはまさに職人技で、思わず見入ってしまいました。
白に近いベージュとチャコールグレーの優しい配色や、ぴょこっと飛び出すような楽しいアニメーションで、「人に寄り添う」ような親しみやすいサイトになっています。
SAKUZAN｜美濃焼のうつわ 作山窯
岐阜県の陶磁器の窯元。
ロゴの丸いモチーフが所々に配置されていて、サイトの中のワンポイントになっています。
特に製品ページで感じたのですが、全体的にシンプルなレイアウトの中で、写真のトリミング・テキストの置き方などで各ページのコンセプトに合わせた見せ方になっているのがとても勉強になりました。
ヤヱガキ酒造株式会社
http://www.yaegaki.co.jp/sake/
兵庫県の酒造メーカー。
白い背景に大きく配置されたタイポグラフィーからはじまり、個性的にトリミングされた写真が印象的なサイトです。
2017年度版 素敵な新卒採用サイトのまとめ
各企業がそれぞれに趣向をこらした採用サイト。それは普段目にするベーシックなコーポレートサイトとはひと味違い、個性的で見応え抜群です。
今年も2017年度の新卒採用が続々と公開されています！
その中でも特に印象的だったサイトをまとめてみました。
※以下は2016年4月28日現在の情報です。
GMOペパボ株式会社
新卒採用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データ先端技術株式会社
新卒採用情報 | 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（りたりこ）
株式会社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…ぜひサイトにいってその変化をみてほしいです。
多数使用していても、そこまでチカチカしない配色は参考になります！