「私にはセンスがないから羨ましいなあ」 仕事は“デザイナー”だというと、周りによく言われる言葉です。私はそう言われるたびに、心にもやもやしたものを感じます。でも、その反面、この仕事に就く前は自分もそう思っていたので、余計にそれは違うと思うんだけど…とちょっと反論したくなります。 私自身もデザイナーという仕事は、特別な能力を持った、特別な人にしか出来ない仕事だと思っていました。 だから、デザインの専門学校に入ろうと思った時は、かなり不安でした。 絵を描いていたわけでもなく、美術部だったわけでもなく、書道と卓球しかやってこなかったのですから（笑） でも、専門学校に入ってWebデザインの仕事に就き、 そんなこんなでデザインに関わって5年目。 私は『センス』はその人が今まで生きてきた中での『経験』から生まれてくるのでは？ と思うようになりました。 あなたも、美しいのは美しい。綺麗なものは綺麗。可愛

日々めまぐるしく変化するモバイルマーケットにおいて、マートフォンアプリやモバイルWebのUIやUXを最適にデザインする事はそのプロダクトがヒットするかの大きな要素となっている。特に最近は見た目が良いだけではなく操作性が非常に高いモバイルサービスが次々とリリースされユーザーが求めるクオリティレベルも上がっている。 小さな画面サイズ、様々な利用シーン、複雑な仕様の機能を実装したモバイルサービスにおいては、高いユーザビリティを実現する事が何よりも重要である。よりユーザーに愛される為もポイントをまとめてみた。 1. レイヤースタイルのUIで奥行きを出す モバイルのインターフェイスに関しては、最近のトレンドを見てみると、フラットなUIがトレンドのように思えるが、実はモバイルの限られたスペースでユーザーに効果的なエクスペリエンスを提供するには、縦と横のスペースに加え、”深さ”を利用したレイヤースタイル

本稿では、まず「ウェブサービス開発の現場で、ウェブデザイナーの仕事はエンジニアに奪われつつある」という脅威を語る。次に、生存戦略を考えるヒントとして「分かりやすい生存戦略」を2つ提示する。「アートディレクター」と「フルスタックウェブデザイナー」という2つの生存戦略だ。 なお、「仕事を奪われていくプロセス」と「生存戦略を遂行するプロセス」について、5〜10年程度のタイムスパンをイメージしている。 ウェブデザイナーの仕事がエンジニアによって奪われつつある ウェブサービス開発の現場では、ウェブデザイナーの仕事がエンジニア／プログラマーによって少しずつ奪われつつある。とくに小さな組織や新規事業の現場では。 象徴的なのは「Bootstrapがあればデザイナー不要だよね」論。「もはや社員としてデザイナーを雇う必要はなくて、必要な時にランサーズで発注すればいいよね」「スタイルシートいじったり画像パーツ作

MacとWindows間で、Illustratorのテキストを編集するデータを作成する機会がありました。 その時に「あらかじめお互いで使えるフォントがわかればいいな」と思ったので、Adobeのヘルプにのっているリストを見ながら一覧を作ってみました。 以下からどうぞ！ Illustrator CC/CS6/CS5/CS4/CS3をインストールするだけで使えるようになるフォント一覧 今回一覧にしたのは、Illustratorをダウンロードしたときに一緒に入るフォントのみです。付属のDVDなどに入っている、あとで追加できるフォントは含まれていませんので、ご注意を。 なので、基本的にIllustratorさえ入れてればOKなフォント一覧ということです！ Illustrator CC … [C] CS6 … [6] CS5 … [5] CS4 … [4] CS3 … [3] ※ （）の中はウェイトご

僕は、実際のギャンブルの現場と同じように、生活のあらゆる状況においても、常に「レベル3の視点」で働くことを心がけているんです。 まず"レベル1"は、「自分視点で動くこと」を指します。あくまでも主眼は自分のみとなり、自分のことに対して一生懸命に努力はできますが、あくまでも自分のことだけで精いっぱいというレベルを指します。 "レベル2"になると、「相手を読む視点」が加わります。たとえば、サラリーマンであれば、仕事で関係ある相手を知ろうとすることがこれに当たります。ポーカーなどのギャンブルの現場でいえば、相手のカードを読むことです。勝負で勝つためにこれは絶対必要ですし、サラリーマンの場合、社内や取引先で一緒に仕事をする人がどんな性格で、どんな思考能力をもっているかを理解しようとするのは必須です。そのうえで、いろいろ対策を講じられる。つまり、"彼を知り、己を知れば、百戦殆うからず"（孫子）というこ

自分がフォローしていない人からのツイートを見ることになる。 あなたのツイッター・タイムラインはもはや自分がフォローしている人のツイート専用ではなくなるようだ。最近同社の「Twitterのタイムラインとは」のページに新たに追記された情報によると、「人気」や「関連する」ツイートがこれから登場するとの説明がある。本来タイムラインとはユーザー自身がフォローすると選択した人々からのツイート専用のスペースだったはずだ。 この変更に最初に気付いたのはThe Next Webだが、このタイムラインの変更はすでに予想されていた。今月ツイッターは新たに二つの新機能を試験運用しており、いずれもユーザーのタイムラインに自分が明示的にシェアしていないツイートが表示されるというものだった。今回の報道で明らかになったのはツイッターが正式にタイムラインへの変更を加え、これによりユーザーのタイムラインには自分がフォローして

TOP  >  plugin  >  魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」 webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。 fullPage.js One Page Scroll Site Plugin 14種の、独特な動きを見せるjQueryプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 jquery.matchHeight Tests ディスプレイサイズによって可変するボックスレイアウトの

モックアップやデザイン制作をするときに使える、ソーシャルボタンのPSD素材を作りました。 Twitter、Facebook、Google+、はてなブックマークの4種類あります。それぞれ日本語表記です。 シェイプで作ってあるので文字数に合わせて横に伸ばしたり、文言の変更もできます。 Download→social_button.zip テキスト部分は「日本語：ヒラギノ角ゴ Pro」「英字：Helvetica Neue」で、MacのOS環境に合わせてます。Windowsだと、おそらく「日本語：メイリオ」と「英字：Arial」になると思います。 鈴木：ソーシャルボタンをWebデザインの中に配置するとき、いつもキャプチャを取って角をPhotoshopで消すということをしていたので、PSD素材作ってみました！ぜひ、制作にお役立てくださいませ〜！

Illustratorで資料を作っていたところ、PDFに別名保存したら順番がおかしくなってしました。どうやらアートボードをあとから複製していたので、順番をごちゃごちゃにしてしまったようです。 そこで、アートボードの順番の変え方を調べたので、自分のメモ代わりにも書き留めておきます。以下からどうぞ！ まずは、アートボードパネルを表示します。 パネルが出ていない場合は、 メニューバーの「ウィンドウ」→「アートボード」で表示できます。 ↑レイヤーパネルのお隣にいますよー。 そこで、順番を変えたいアートボードを （方法1）ドラックして移動させるか、 （方法2）パネル下の矢印ボタンを押すと移動できます。 これで、PDFで保存したときもちゃんと順番どおりに並んでくれます！ ※注意：アートボードパネルはCS5以降に実装されたものです。 鈴木：上に注意書きしましたが、このアートボードパネルはCS5から実装さ

普段、私がスマートフォンのアプリを考えている時に、UIやデザインの参考にしているサイトをご紹介します。 以下のまとめサイトはカテゴリー分けもされていて、眺めているだけでもとても勉強になりますよ。 他にもおすすめのサイトがあったらぜひ教えてください！ Pttrns — Mobile User Interface Patterns http://pttrns.com/ Mobile Patterns http://www.mobile-patterns.com/

スマホ版サイトやアプリのデザイン確認を快適にしてくれる、便利なMacのアプリ「Skala Preview」をご紹介します。 このアプリ、Photoshopで作業しながら、スマホの画面でリアルタイムにデザインが確認できるんです！しかも無料！ もし、今まで私のように（JPEGに書き出す→Google Driveに入れる→iPhoneで表示して確認…）やっている方は、「Skala Preview」をぜひ使ってみてください！ 使うために必要な環境 Mac OS X（10.8以上） iPhone（iOS 1.7以上）またはAndroid（1.2.2以上） Adobe Photoshop（CS5以上） ※上記は2014年7月30日時点の情報です。最新の情報は公式サイトで確認してください。 Skala Previewの使い方 設定は簡単で、10分ほどで終わります。 全体の流れ 手順１：まずはMacとスマ

今日はクリスマス、この日を過ぎるとあっという間にお正月ですね。今回は、2013年を振り返って日本らしい和風のサイトをまとめました。 海外サイトはどんどんフラットデザインになっていますが、日本語の文字自体が結構フラットデザインに合わせるのが難しいですよね。そんな中で、日本の「和」を活かしたサイトを改めて振り返りたいなと思い、個人的にブックマークしておきたいWebサイトを集めてみました。以下からどうぞ。 清水へ参る道 http://feel.kiyomizudera.or.jp/ 株式会社 菱健 HISHIKEN Co. Ltd., http://www.hishiken.co.jp/ 京都おすすめ神社 – 縁結び・ご利益・恋愛 – コトログ京都 http://shrine.kotolog.jp/ 三度目の京都　Sando Me No Kyoto http://www.sandome-kyot

海外で話題の「Snapchat」というアプリをご存知ですか？ なんとこの「Snapchat」は動画が10秒で消滅してしまうんです！消えてしまうということはどんなに変な動画を撮っても消えちゃうので、気兼ねなく友達とやりとりができるという、斬新なアイデアのアプリ。 そんなSnapchatも含め、私が実際に使ってみて面白かった、短時間の動画を撮影・共有、さらに編集や加工もできるおすすめアプリをご紹介します！ Snapchat 先ほど冒頭でもご紹介した、最長10秒以内の動画や写真を送れて、一度見たら消滅するアプリ。海外では若年層を中心に流行っているらしく、おばけのキャラクターも可愛いです。 日本語訳がないので最初はちょっと操作に戸惑いますが、慣れてしまえばその面白さにハマってしまいます！ Snapchatをダウンロード → App Store or Google play Spark Camera

コクヨグループのコクヨS&Tは紙に筆記した内容を簡単にデータ化できるデジタルノート『CamiApp S』を発表しました。 『CamiApp S』はノートブックタイプとメモパッドタイプの2種類あり、それぞれ専用のペンとセットになっています。ノートやメモの下敷きとなるカバー・台座部分に充電式のセンサーが搭載されており、電磁誘導式のボールペンが用紙に触れることでセンサーが筆記した内容を読み取る仕組みになっています。 用紙は『CamiApp S』専用のものを使用します。優れているのは、手書きのデータを保存するまでの流れがシンプルな点。本体の電源オンの状態でノートに筆記を始めると自動的にステータスが“筆記中”となり文字を認識し、用紙の隅のチェックボックスにサインをするだけでアプリに手書きデータがアップされます。ペン側のスイッチ切り替えやスキャンなどの作業は一切不要です。そのため、用紙に通常どおりメモ

文字と一体化する猫 同製品は、文字の一部を猫に置き換え、自然な形で名前と猫が共存するようにデザインされた印鑑。 開発のきっかけは、文字(漢字)を見ていたところ「ここが手で、ここが足で」と、自然と動物のように見えてきたこと。試しに、思ったまま文字の一部をそれらしいポーズの猫に置き換えたところ、思いのほか違和感なく文字として成立したのだという。

グラフィックやWebなど文字に関わる人なら誰もが知っていると言っても過言ではない王様フォント「Helvetica」。Macでは標準で入っていますが、Windowsには入っていません。なので、WindowsではHelveticaの代わりとして「Arial」というフォントが使われます。 HelveticaとArialはとても似ているフォントですが、実際にどのくらい字形や印象が違うのでしょうか？ 字形の違い colisさんで下記のような記事が紹介されていました。 ArialとHelveticaの違いがはっきりと分かるこの一枚 画像をみるだけで形の違いがわかります。（青がArial、赤がHelvetica） arial & helvetica (via: swissmiss) Helvecitaの方が少し手書きの名残りを残したような柔らかい形をしていますね。 どっちがHelvetica？ 企業ロゴ

CGの人体モデルを自由にポージングし、好きなアングルから見られる──そんなiOSアプリ「ArtPose」が絵描きさんの間でちょっとした話題になっています。「絵を描くときに重宝する」「影の勉強になりそう」といった真面目な感想に加え、柔軟すぎるポージング機能で面白おかしく遊ぶ人も出てきています。 アプリ上でCGの人体モデルをグリグリできる「ArtPose」 女性モデル版の「ArtPose Female Edition」もあるぞ 同アプリは、タッチ操作でCGモデルをさまざまなアングルから眺めたり、関節を操作してポーズを変更したり、光源を移動させて光の当たり方を変えたりできるアプリです。「俯瞰（ふかん）気味のポーズが描けない……！」「影の入り方が謎……」──こうしたお絵かきでよくある悩みを解決する手助けになりそうなツールですね。価格も300円と良心的です。 基本となるポーズがいくつかプリセットされ

ファブリックパネルとは、木製の枠組みに絵やプリントを施した布を貼り付けた北欧発祥の壁掛けインテリアです。そんなファブリックパネルの世界にただ1つのデザインをいくらでも生成できるのが「variart」です。デザインごとにソースコードが組まれており、全く同じデザインが生成されることはないため、バリエーションは無限大。クリックしたり、各種数値をスライドバーで変更したりするだけで、プログラミングコード＆アートが融合したパネルを作成することができます。 Where code meets art | variart http://variart.io/ トップページには「コードとアートが出会う場所」と書かれています。元となるデザインは大量に用意されており、自分であれこれカスタマイズできるサービスとなっています。 最もよく見られているデザインのトップ16は以下のもの。デザインのどれか1つをクリックすると

2014-08-21 ランサーズで提案したデザイン案が無断で利用されている件について（8/21） Web制作 記事を公開した翌日の昼には「ランサーズにおけるキャンセル時の提案の不正利用に関しまして」という記事もあがり、担当の方からのお電話もいただきました。解決に向けての素早い動きありがとうございます。 メディアの方からの取材要請もあるなど、大事になってしまい困惑しています... 他の画像も少し改造されて利用されているのを発見しました。ご指摘くださった方に感謝です！！ 私達としては 完成まで制作したものではない 叩き台として「ここに御社の物件画像いれましょう。物件の写真ないですか」「配色を決めましょう」とやり取りしていた時のデータなので、この段階のものが利用され公開されていることに困惑しております という段階で、現時点では「無断利用したデザインの削除」を要請しています。「相手の社名などを公開