アシアルブログ

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

デザイン・UI

温泉マーク問題

この記事はOnsen UI Advent Calendar 2016向けの記事として書きました。 アシアルのマーケティング担当の塚田です。 先日報道されたOnsen UIのマーケティング上、非常に重要なニュースについて書きたいと思います。

OnsenUI 2.0βのマテリアルデザインについて

OnsenUI 2.0のマテリアルデザインについて紹介します。

SassとLESSの違い ー CSSプリプロセッサ入門 ー

スタイルシート代替言語であるSassおよびLESSの特徴と使い方を紹介します。

ElectronでOnsenUIを利用してみよう!

ElectronとOnsenUIを組み合わせてデスクトップアプリを作ってみます。

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

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

Onsen UIをWebサイトで使ってみよう

Onsen UIをハイブリッドアプリだけでなく、Webサイトでも使ってみましょう。

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

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

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

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

iPhone6 PlusのPSDモックアップとAppleのフォント

みなさんお久しぶりです。 デザイナーの和田です。 iPhone6 PlusのモックアップをPSDで作成しました。 公開いたしますので、お使いになりたい方はダウンロードしてください。商用利用可です。

Onsen UI Developer Preview 2リリース!

今日はOnsen UI のdeveloper preview バージョン2をリリースします!

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

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

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

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

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

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

SVGと画像ファイルの容量の差を検証-2 〜PNG,GIF追記〜

こんにちは。和田です。 とうとう12月になりました。今年もあと1ヶ月弱。時間が経つのは早いですね。 さて、今回は前回に引き続きといいますか、 「PNG,GIFとSVGを比較した方がよいのでは!?」というご意見いただきましたので、そちらの比較をしてみようと…

SVGと画像ファイルの容量の差を検証

こんにちは。和田です。 今後数回に分けて、デザイナー視点でSVGファイルについて書いてみようと思います。 (あくまでデザイナー視点ですのでIllustratorで作成した図をSVG保存して、どうなるか…みたいな事を書いていきたいと思います。)

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

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

Fireworksでちょっとリアルな雲を描く方法

こんにちは。和田です。 最近、だいぶ秋らしくなってきました。 上空は秋晴れの奇麗な空が広がっています。 そんな空を眺めていて、 ふっと、 簡単にFireWorksでリアルな雲は描けないかな…と思いチャレンジしてみました。 むちゃくちゃリアルではないですが…

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

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

レスポンシブWebデザインについて3つにまとめてみました

こんにちは、花崎です。 このところコーディングをする機会が多くなってきました。 最近では簡単なサイトを作成し、スマホ用とPC用で作成しました。 いろいろ勉強していると、最近「レスポンシブWebデザイン」という言葉をよく見かけます。 最近注目されてい…

スマホ&タブレットの解像度(ppi)ベスト3

こんにちは。和田です。 最近のiPhoneは解像度(ppi)がとても高いですよね! と、感動していたのですが、ふと実際に流通している他のスマホの解像度(ppi)ってどうなっているのだろうと思い、ちょっと調べてみました。 そうしたら、iPhoneよりも高いppiの…

古びた紙にかすれた風の文字のデザインを作ってみました。

9月はイベントが多く、キャンペーン用フライヤーなど目立つような派手な印刷物を作っておりました。 そこで今回は、派手でポップなデザインをPhotoShopで作成してみようとおもいます。

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

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

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

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

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

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

レスポンシブデザインのウインドウサイズの切替えについてまとめてみました

こんにちは。和田です。 今回はFireworksから離れて、最近なにかと話題のレスポンシブデザイン-特にウインドウサイズの切替えについて書こうと思います。

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

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

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

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

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

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

非エンジニア出身の新米Webディレクターが覚えておくべき10の用語 その2

こんにちは、鴨田です。 先日、非エンジニア出身の新米Webディレクターが覚えておくべき10の用語という記事を書いたのですが、 今回はその続きというか、第2弾をお送りしたいと思います。 もしかしたら、用語を説明するための用語が分からないのではないかと…

iCloud風のアイコンを作成する(Fireworks)

こんにちは。和田です。 今回はiCloud風のアイコンをFireworksで作成したいと思います。 オブジェクトは3つだけで作成できるのでとても簡単です。 いくつかバリエーションを作ってみました。 ↓仕上がりイメージはこんな感じです。