アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

デザイン

【jQuery Tips】スクロールで画像がめくれる動きを表現する

ページスクロールと連動して、前面の画像がめくれて背面の画像が現れる効果をjQueryで実装します。

社内勉強会での「チームで作る!イケてるデザイン」の資料を公開しました

アシアルの社内勉強会で発表した資料を公開します。今回の社内勉強会では、「イケてるデザイン」をテーマに勉強会を開催しました。自分はその中でも「どうやってチームでイケてるデザインを作るのだろうか?」ということをテーマにして話をしました。

IllustratorでSVGファイルを保存してみました

最近よく見かけるSVGファイル。 Illustratorで作ったデータをSVGに保存してみました。

CSSだけで作るアイコン付きボタンの作り方

こんにちは、鴨田です。 近頃はボタンのデザインに限らず、CSSで実現できるものは、 グラフィックにせず、CSSだけで書いています。 ボタンデザインに限らず、HTML/CSSで書いた方が効率的なこもあって、 最近はあまりPhotoshopを開くこともなくなってきていま…

Webデザイン 配色をイメージで学ぶ【基本11色】

近頃、ユーザが製品を経験してどれだけ満足を得れるのかといった仕組みが注目を浴びています。UXですね。配色もUXの範疇とすれば、理解を深めておいて損はないと思います。今回は基本的は色と使われるWebサイトのタイプも併せてザックリと紹介していきます。

デザイナーの視点から見たオシャレ&面白いバナーを30個集めてみました。

こんにちは。花崎です。 アシアルでは、積極的にセミナーやイベントごとに出展をしています。 その際にバナー広告を作成するのですが、あの狭いスペースに載せたい情報を盛り込み、クリックしたくなるようなデザインにするのかいつも頭を悩ませます。 一番訴…

ウェブ制作に重要なワイヤフレームを書けるツール&ウェブサービス6選

こんにちは、久保田です。 ウェブサイトのデザインやコーディングを始める前にワイヤフレームは作っていますか?ワイヤフレームは、以下の様な内容を設計するのに利用されます。 ・ページ間の遷移 ・ページの内容 ・ページの大まかなレイアウト これらの項目…

Slicyで面倒なPSDのスライス作業を効率化 !

こんにちは、最近コード書く時間がなくなってPhotoshopいじっている時間の方が主になってきました、久保田です。 Photoshopを使った画像書出しの時には、面倒なスライス作業をやらなければいけません。この記事では、Photoshopで面倒なスライス作業を劇的に…

グレーにカラフルな色が効いている国内&海外のサイトを14個まとめてみました。

こんにちは、花崎です。 最近髪の色を赤茶色にしました。 昔から赤毛の外国人さんを見ると、きれいな色だなと思っていたので紅葉のこの季節になると赤く染めます。 よく赤い下着を付けると元気になる、という情報を聞きますが確かに赤色を身に着けるだけで気…

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

こんにちは、鴨田です。 先日、会社のPCにAdobe CS6が導入されました。 今までCS4だったので、いろいろな変化に驚いています。 今回はPhotoshop CS6の新機能について、紹介したいと思います。 ただし、CS4→CS6になっての変化なので、 CS5からある機能も少し…

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

こんにちは、鴨田です。 何かパーツをデザインするとき、 もっとリアルにしたいな、質感を出したいな、とか、 思うことがあったりしませんでしょうか。 まあどういうデザインを行っているかによって違うとは思いますが、 誰もが一度はそんなことを考えたこと…

打ち合わせで「聞いておくべき」Webデザインをスムーズに進める3つの質問

いつも自分がクライアントに聞いてるなーという質問から3つピックアップしました。

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

こんにちは、鴨田です。 最近は、HTML/CSSコーディング系のブログばかり書いていましたが、 たまにはデザイン系のブログも書こうと思います。 とはいえ、最近デザインワークをしていないので、 あまり旬な話題や経験に乏しいこともあり、自分の趣味に走りま…

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

こんにちは、鴨田です。 最近はあまりデザイン寄りの記事は書いていなかったので、たまにはデザイナーとして側面から、記事を書きたいと思います。 今回は海外ブログ記事のご紹介です。 10種類のポスター作品と6つのポスターまとめ記事(サイト)を紹介してい…

イコライザーをFireworksで描いてみました

こんにちは。和田です。 最近、会社の中で音楽を趣味にしていたり音響に詳しい人たちが増えて来たように思えます(今まで知らなかっただけかもしれませんが…)。 ということで、今回は音楽ネタを描こうと思います。 描くものはイコライザ—です。 出来上がり…

超便利!Twitter BootstrapでさくさくWeb開発

エンジニアのみなさんがWebアプリケーションを作るとき、一番悩むのはデザインではありませんか? 今すぐ開発始めたい!でもデザインセンスないし…色味のない開発中画面はつまらないし… でも!Twitter Bootstrapを使うと、簡単にカッコいいサイトが作れます!

スマートフォン(iPhone/Android)アプリ制作時に役立つ画像サイズのまとめ

こんにちは、鴨田です。 最近、スマートフォン関連の仕事が多いのですが、 スマートフォン絡みのデザインをするときに、 この画像はどんなサイズだったっけ、 っていうことが多いので、まとめておきたいと思います。

Appleのサイトで見たiPhone4をFireworksで描いてみました-1/2

前々回に引き続き、FireworksでiPhone4を作成してみました。 今回はAppleのサイトで見たiPhone4(斜めから見た)をお手本にしています。 ただ、今回はちょっと長くなりそうなので、ボタン部分は次回に作りたいと思います。 なので、今日はボタンなしのiPhone…

WEBデザイナーに必要な3つの基礎と持っていると役立つ5つの能力

こんにちは。 アシアルWEBデザイナーの鴨田です。 最近はディレクターとしても頑張っていたりするのですが、 やはり根本はデザイナーなので、デザイナーが持ってると、 役に立つんじゃないかと個人的に思う能力について、語ってみようかと思います。

AndroidにおけるLauncherアイコン、背景画像の作り方

はじめまして。鴨田と申します。 年初からアシアルにてデザイナーとして働いており、 今日からブログも書くようになりました。 どうぞよろしくお願いいたします。 さて、今日はAndroidにおけるLancherアイコン制作を中心に、 お話をさせていただきたいと思い…

デザインの見積もりをお願いするときに気をつけること

こんにちは、デザインはさっぱりな高橋です。 さて、皆さんはウェブサイトのデザインの見積もりを社外へお願いしたことはありますか? 私は、これまで社内にデザイナーさんがいたり、他の人が担当されていたりで、実際に自分で行うことはありませんでした。…

色が与えるイメージ

お久しぶりです。阿部です。 夏といえば真夏の太陽!「オレンジ」とか「赤」というイメージ、ありませんか? 暑~い感じがしますよね。という事で、今回は「色が与えるイメージ」について書きたいと思います。