Asial Blog

Recruit! Asialで一緒に働きませんか?

鴨田健次

Webディレクター/Webデザイナー

某無料動画配信サービスでWEBデザイナー/コーダーとして腕を磨き、現在はアシアルにて、WEBディレクターとして精進しています。シンプルで見やすいデザインが好きです。。

たずさわった仕事

決定版?! スマホページ用のリストレイアウトHTMLテンプレートを書いてみた

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
jQuery
icon
こんにちは、鴨田です。

年の瀬ですね。
年をとる毎に一年があっという間に過ぎてしまうので、
もう今年も終わりかと嘆く日々です。

ということで、個人的には今年最後のブログとなります。

スマホサイトを作っていると、
見出しリストの作り方というのが、大分テンプレート化するので、
今日は自分メモも兼ねて、リストテンプレートを作りたいと思います。

パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
jQuery
パララックス
アニメーション
icon
こんにちは、鴨田です。

今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。
春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。

とはいえ、最近は視差効果で奥行きを表現するというよりも、
単純にスクロールに連動してアニメーションさせることも含めて、
パララックスサイトと呼んでいるが多いのではとも思います
何かと話題のスマホアプリ「comm」もそうですね。

そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。

ベテランPhotoshopユーザも必見! Photoshop CS6 新機能まとめ

カテゴリ :
デザイン・UI
タグ :
Tech
Photoshop
デザイン
11-1.png
こんにちは、鴨田です。

先日、会社のPCにAdobe CS6が導入されました。
今までCS4だったので、いろいろな変化に驚いています。
今回はPhotoshop CS6の新機能について、紹介したいと思います。

ただし、CS4→CS6になっての変化なので、
CS5からある機能も少し含まれているので、あしからず。

質感はどこからやってくる?

カテゴリ :
デザイン・UI
タグ :
Tech
Design
Graphic
Photoshop
デザイン
00.png
こんにちは、鴨田です。

何かパーツをデザインするとき、
もっとリアルにしたいな、質感を出したいな、とか、
思うことがあったりしませんでしょうか。

まあどういうデザインを行っているかによって違うとは思いますが、
誰もが一度はそんなことを考えたことがあるはずです。

では、何をもってリアルな質感というのか?

アール・ヌーヴォーの巨匠ミュシャを知る・使う

カテゴリ :
デザイン・UI
タグ :
Tech
デザイン
ミュシャ
素材
フォント
アルフォンス・ミュシャ---Wikipedia.png
こんにちは、鴨田です。

最近は、HTML/CSSコーディング系のブログばかり書いていましたが、
たまにはデザイン系のブログも書こうと思います。

とはいえ、最近デザインワークをしていないので、
あまり旬な話題や経験に乏しいこともあり、自分の趣味に走ります。

さて、自分はアルフォンス・ミュシャが好きだったりします。
あんな画が描けたらどれだけいいものかと思ったりします。
でも全く描けないので、せめてミュシャの紹介と
ミュシャに近づくための素材の紹介をしていきたいと思います。

もうアイコン画像はいらない! Webフォントを使って、iOS風タブバーとアイコンを作成する方法

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
HTML5
CSS3
iOS
Android
01.png
こんにちは、鴨田です。

最近、アイコンがセットされたWebフォントを使うことで、
画像を使わずにアイコンを表示するという手法が流行っていますね。

すごく興味はあったのですが、なかなか使う機会もなく、
便利そうだなと思っていただけで、今まで使ったことがありませんでした。

しかし、先日、とある案件でやっと使う機会に恵まれたので、やり方をご紹介いたします。
(プロトタイプだけ作って、結局プロダクトとしては使いませんでしたが・・・)

CSS3だけで作るレスポンシブデザイン対応ナビゲーションバーの作り方

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
CSS3
HTML5
レスポンシブデザイン
icon
こんにちは、鴨田です。

最近はRetina対応のMac Book Proが出たり、特にスマートフォンに限らず、解像度の高いディスプレイが多くなってきました。そうなると、画像でいろいろな素材を作るということに関して限界が出てきます。

なので、最近はCSSだけでナビゲーションバーのデザインやコーディングを行うことが多いとは思いますが、知ってる人も知らない人もちょっとしたナビゲーションバーを作ってみましょう。

作るのは、横幅は特に設定しないレスポンシブデザインにも対応できるリキッドな6つの項目を持ったナビゲーションバーとします。ただし、スマートフォンを意識して、外側に320pxのラッパーを配置しておきます。

Monaca IDEのデザインが新しくなりました

カテゴリ :
Monaca
タグ :
Monaca
monaca
こんにちは、鴨田です。

以前から予告しておりましたが、先日からMonaca IDEのデザインが新しくなりました。
前と比べて、より洗練されており、落ち着いたイメージになっています。

スマートフォン&モバイルEXPO、ご来場ありがとうございました

カテゴリ :
Monaca
タグ :
Monaca
icon
こんにちは、鴨田です。

先週、9~11日にかけて、スマートフォン&モバイルEXPOが開催され、Monacaもブース出展しておりました。自分もブース説明員、ミニセミナー講師として、会場におりましたが、Monacaブースに多数ご来訪頂き、誠にありがとうございました。

とにかくずっとお客様がいらしたので、ブースにいる間はずっと説明をしていたので、結構、喉が痛くなりました(笑)
普段こんなにしゃべることはありませんですからね。

本当はブースの写真など載せたいところですが、きっと後で誰かが補足してくれることと思います。

自分が説明をしていた中で、質問されたことをここでまとめておきたいと思います。


Q.Monacaにはどのようなアプリが向いていますか?


個人的な経験則から言うと、ゲームアプリや動きの多いアプリなどには、Monacaで作成するアプリは向いていないと思います。出来ないことはありませんが、操作のサクサク感は端末のスペックにもよるので、あまりオススメしません。情報配信系アプリや営業系アプリであれば、問題ないでしょう。

Q.Monacaで作ったアプリはオフラインのみで使うことができるのか?

もちろん作り方にもよりますが、オフラインで使えるアプリにすることは可能ですし、逆にデータ全てをサーバー上に置いて、オンラインでのみ使う事も出来ます。アプリの特性や使い勝手に合わせ、組み合わせるのがよろしいと考えています。

Q.HTML5でなければ、ならないのか?

必ずしも、HTML5である必要はありません。HTML4でもXHTMLでも問題ありません。スマートフォンであれば、HTML5を使っても差し支えなく機能面で優れているので、HTML5をオススメしております。

Q.Monacaでアプリを作ると何が嬉しいの?

もしすでにWeb技術を使ったコンテンツをお持ちであれば、短期間・低コストでネイティブアプリを作成することが出来ます。iOS/Android、どちらのOSでも、同じソースで展開することが出来ます。Webアプリでは使用することの出来ないネイティブの機能を使用することも可能です。メンテナンスの上でも、Webの知識があれば修正することが可能なので、リリース後の運用をクライアントサイドで行うことも出来ます。

このようなところでしょうか。
Monacaの概要だったりは、このブログをご覧の方は知っていると思うので割愛しますが、自分にとってもMonacaとはどんなプラットフォーム出るのかを再考することの出来るイベントでした。

機会があれば、まだまだ展示会などブース出展などしていく予定ですので、いろんな方々にお会いできればと思っています。

インスピレーションをかきたてるポスターデザインのまとめ記事のまとめ

カテゴリ :
デザイン・UI
タグ :
Tech
デザイン
ポスター
まとめ
DTP
01.jpg
こんにちは、鴨田です。

最近はあまりデザイン寄りの記事は書いていなかったので、たまにはデザイナーとして側面から、記事を書きたいと思います。

今回は海外ブログ記事のご紹介です。
10種類のポスター作品と6つのポスターまとめ記事(サイト)を紹介しています。

記事内で紹介しているまとめ記事(サイト)は原文と同じですが、ポスター画像は自分が気に入ったものに変えていますし、冒頭文は意訳ですので、翻訳元の記事も確認してもらえると、より正確に伝わると思います。