こんにちは！　野尻湖オフィス デザイナーのずんこです。 最近追加された新機能を確認してみたら、Adobe XDが大幅アップデートされ、さらに誰でも使える無料プランまで提供されていて、改めてすごく進化していることに気づきました。 今でこそ社内のディレクターもデザイナーもXDを使用していますが、XDがこんなにメジャーになる前に社内にXDを普及させようと書いた記事があります。 これ以降XDを使ってなかったそこのあなた。この進化ぶりには目をみはるはずです！ そしておそらく最近のアップデートのありがたみを一番享受できるのがデザイナーなのではないかと私は思うのです。 なので再び、XDを布教する活動を行おうと思います。デザイナーの皆さん、準備はいいですか？ 軽い、早い、簡単そして安心 まず、Adobe XDはAdobe Creative Cloudを契約していれば、今すぐにでも導入できます。 XDを愛用

エンジニアもプレゼン入門！ LT（ライトニングトーク）のテーマ選びから、スライドの作り方まで LT（ライトニングトーク）は、 カンファレンスなどで実施される短時間のプレゼンテーション。エンジニアにも避けて通れないプレゼンの経験を積むには絶好の機会です。LTに挑戦したい若手エンジニアに、気をつけるべきポイントをお伝えします。 エンジニアとして仕事をするときにも避けて通れないのがプレゼンテーション。ディレクターや営業などの他職種のメンバーに対して技術側から説明すべき場面や、提案をしたい場面で必要になるでしょう。技術力を高めるだけでなく、新人のうちにプレゼンテーションにも慣れて苦手意識をなくしたいところ。 しかしながら、業務中に自分からプレゼンテーションの機会を作るのは難しいでしょう。そこで、LT（ライトニングトーク）をうまく活用することをおすすめします。 今回はLTに挑戦する際に気をつけると良

自動的に移動しない場合はをクリックしてください。

上海で働くさすらいのゲームデザイナー/ディレクター。日本語、中国語、英語、名古屋弁のマルチリンガルということになっている。 ファミコンの初代スーパーマリオブラザーズには優れたUXを作りあげるためのヒントがたくさんあります。 今回の記事では、スーパーマリオの１－１に散りばめられた「ユーザーに新しいことを自然に覚えてもらう工夫」を紹介します。 新規コンテンツの「色々覚えるのめんどくさい問題」 新しいコンテンツでは、ユーザーにいかに使い方や遊び方を理解してもらうかが非常に大きな課題です。 クリエイターは「新しくて誰も見たことがないものを作りたい！」と思うものですが、ユーザーにとってみればコンテンツを初めて利用するときの面倒くささがその斬新さに比例して大きくなっていきます。最初の「覚える」段階のUXが悪ければ、その先にどれだけステキな体験が待っていたとしても、そこに到達する前に多くのユーザーは離脱

JakeはUIデザインやウェブ開発の記事を執筆するライターです。彼の仕事はあらゆるウェブや彼自身のポートフォリオで見つけることができます。ツイッター@jakerocheleauから最新のアップデートをフォローできます。 ドロップダウンメニューは、近年のJavaScriptとCSS3のおかげでずいぶんと発展してきました。しかし、すべてのドロップダウンメニューが同じように制作されているわけではなく、その機能性にはばらつきがあります。 この記事では、使いやすいドロップダウンのナビゲーションメニューを作るための手段をいくつか紹介します。また、基本的には同じデザイン原則に則っているマルチドロップダウンや、メガメニューについても触れていきます。 サブメニューにマーカーを付ける サブメニューのリンクに、マーカーをつけるのは良いアイデアです。このちょっとした視覚的なシグナルがあることで、どこにリンクがあり

Since 2006, we’ve helped the most innovative startups and reputable brands design, build, and ship products worth talking about.

一度書いたコードは二度と探さない！スニペットを究めて快適コーディング！【HTML, CSS, JavaScript】 ※この記事は2013年8月26日に執筆された記事です。現在は仕様が異なる可能性があります。 気がつけば繰り返し同じ単語で検索し、同じコードを書いている…なんてことはありませんか？「この部分の記述、もう一回使うことがあるかも」と思ったらぜひスニペットとして登録しておきましょう！ スニペットとは繰り返し登場するコードの断片、またはそれをすぐに呼び出せるように管理するエディタの機能のことです。自分がよく使用する記述をスニペットにしておけばいちいち検索したり、昔書いたソースを探ってみたりすることなく、使いたい時に正確な記述をサッと呼び出して使うことができます。 Dreamweaver、Sublime Textなどのオーサリングツールやテキストエディタにはスニペットを自在に使うための

Whether you're designing a website or writing a paper, Mixfont is simple way to choose beautiful fonts that work well together.

無料のアイコン素材はたくさんありますが、シンプルなデザインで使い勝手のよいものとなるとなかなか見つかりません。 個人でも商用でも無料で利用でき、豊富なアイテムが揃ったアイコン素材を紹介します。 Feather Feather -GitHub ダウンロードできるアイコンのフォーマットはSVGで、拡大縮小やカラー変更なども自由自在です。 WebサイトやアプリのUIでよく使うアイテムが、200種類以上揃っています。

ゆたろです。どうもです。 先週、髭剃りが壊れて無法地帯です。 さて、今回は、昔遊んだ「レトロゲーム」を連想させる表現ができるjqueryプラグインを紹介していきたいと思います。 縦スクロールシューティングゲーム風　starscroll.js starscroll.js要素に対して、縦スクロールシューティングゲームの背景のようなエフェクトをつけてくれるプラグインです。 sample https://github.com/vonKristoff/starscroll html --省略-- <h1>starscroll sample</h1> <script src="jquery.js"></script> <script src="starscroll.js"></script> <script src="hoge.js"></script> --省略-- javascript hoge.

はじめまして、デザイナーのヴィクトリアです。 わたしが日々の業務でやらせてもらう機会の多い「下層ページのデザイン」。下層ページのデザインとは、主に先輩デザイナーが作成したトップページのデザインをもとに、文字どおり下層ページを作成すること。ページ数の多いサイトではよく手分けをして作業しますね。トップページのデザインを渡されたらまず、デザインをじっくり見て確認します。ここの考査を怠ると、下層ページが全然違うページに仕上がり修正の嵐になるわけです。 今回は、そうならないために気をつけたいポイントを備忘録としてまとめました。当たり前のことばかりですが、忘れないように気をつけたいです！ 確認するポイント 1. サイトの目的 下層ページから案件に入るときにまずおこなうことは、トップのデザインがどういう経緯でできあがったのかを知ることです。この経緯を知らないと、もとのデザインの意図とずれてしまい、戻しが

こんにちは、デザイナーのサリーです。 サイトをデザインするときに当たり前に入れている「Copyright（コピーライト、©️）」の記述ですが、サイトによって年号があったりなかったり、長かったり短かったり、書き方はさまざまですよね。 今回はコピーライトとは何か、正しい書き方や©との関係性について詳しく解説していきます。 コピーライトとは コピーライトとは、英語で「Copyright」と書き、”著作権”のことを指します。著作権とは、作品を創作した人や会社（著作者）が持つ権利であり、著作者は作品がどう使われるか決めることができます。 Webサイトやホームページの下部にコピーライトがあるのは「ここにある記事や画像の著作権は自社が持っているから、無断転載しないでください」という一種の意思表示です。 厳密にいうと著作権法で著作物は「思想又は感情を創作的に表現したものであって、文芸、学術、美術又は音楽の

TKです。仕事中はアニソンしか聞かない私ですが、通勤中は技術系のPodcastを聞いていることが多いです。 そんな私が、エンジニアにオススメするPodcastをご紹介します。 Podcast初心者にオススメ「Rebuild」 公式サイト：https://rebuild.fm/ iTunes：https://itunes.apple.com/jp/podcast/rebuild/id603013428 まずはみんな大好きrebuild.fm。 メインパーソナリティの宮川氏と著名なゲスト陣の、技術だけにとどまらない面白トークを聞くことができます。Podcast初心者の方は、これから聞き始めるといいでしょう。また、後述するPodcastのいくつかは、Rebuildをきっかけに始められたチャンネルだったりします。 Web系プログラミング全般を学ぶ「CodeLunch.fm」 公式サイト：http:

こんにちは。ライターの紳さん（@shinsan_lig）です。 とある目的のために北海道に来ました。 訪れたのは、すすきのにある「河合珈琲」さん。 知る人ぞ知る珈琲の名店でございます。 こちらがお店のオーナー、河合さん。 珈琲店と一緒に「やすべえ」というゲストハウスを経営していらっしゃいます。 河合珈琲/ゲストハウスやすべえ　店舗情報 住所：北海道札幌市中央区南１０条西７丁目６−６ 電話番号：０１１−２１３−１３０５ 定休日：特になし ボサノヴァ的な音楽が流れていて、とても落ち着く店内。 豆を買ったり、焙煎をすることも可能な本格的なお店です。 カウンターテーブルの裏には、言わずと知れた天才Webライター・ARuFaさんのサインもありました。 各界の著名人も訪れる、すごいお店なんですね。 今回、僕がここを訪れたのはハート模様のカフェラテのつくり方を教わるためです。 河合さんは「ハート模様のカ

はじめに 私は主にiOSアプリのプログラマーなのですが、デザインまで一緒に頼まれる事があります。 デザイナーじゃないので１からデザインをしていくなんて到底無理です。 そんな時にノンデザイナーの方でも良い物を作るために UIデザインのギャラリーサイトと配色パターンを決める便利なサイトをご紹介致します。 基本他のアプリを真似参考にするといい感じにできちゃうかもしれません。 Web系開発の方も配色パターン等は参考になると思います。 デザインをする前に デザインをする前に呼んでおいたほうがいい物 - ITエンジニアに易しいUI/UXデザイン - デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」 - ノンデザイナーのための配色理論 アプリデザイン CAPPTIVATE.co 動きのあるカッコいいUIばっかり載っています。 種類別で見ることもできるので便利ですね。 Mobile D

初めてのiPhoneアプリを7日間で開発しました。 ウェブサイトの企画・制作が本業の僕にとって、アプリの制作はまったくの未経験。そのくせApp storeでリリースするところまで達成できたのは、 アプリ作成に挑む前の「気持ちの作り方」 技術不足を補ってくれるツール この2つのおかげだと思っています。 アプリの制作に挑戦し、途中で挫折してしまう失敗の原因に多いのは、身の丈に合わない難しすぎるアプリを作ろうとしてしまうことです。 僕の場合は、とにかくアプリを完成させることをゴールとして設定。開発期間を短縮してくれそうなツールがあれば利用することをアリとしました。 その結果、わずか1週間で初めてのアプリの制作を終えられたのです。 アプリをApp Storeからリリースしたことが「ある」と「ない」の差は自分にとっては大きく、ゼロから1にできたことへの達成感は今でも心に残っています。（この記事はアプ

Liberato 自然素材をアップサイクルしたサステナブルなシューズブランド「Liberato(... 詳細を見る

日本語のフリーフォントを利用してデザインする際などに「クールなデザインにしたい」「かっこいいフォントを使いたい！」という場面があるかと思います。 ただ、英語のかっこいいフォントはすぐに見つかるのに、日本語になるとすぐに見つけられないということがあります。 そこで今回は、デザイン性が高くてかっこいい日本語フリーフォントをフォントのタイプに分けてご紹介していきます。 商用利用可能なものから、漢字を含んだもの、カタカナのみのかっこいいフォントまで幅広く用意してみましたのでご覧ください。 かっこいいゴシックフォント 鉄瓶ゴシック 鉄瓶（てつびん）ゴシックは、フォントな自由さんが公開している角ゴシックフォントです。 「源ノ角ゴシック」を改変して制作されており、極太の文字かつごつごつとした質感がかっこいいフォントです。 商用：OK ひらがな：◯ カタカナ：◯ 漢字：◯ ▷ 鉄瓶ゴシック スマートフォン