サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
ドラクエ3
technical-creator.com
Web制作をするにあたり、ターゲット層はもちろんのこと様々な見え方を想定していかなければなりません。色盲・色弱もそのひとつです。色覚異常の方は日本に約290万人いるとされ、どんな人にも見やすく情報を伝えられるサイトにする必要があります。 今日はそんな色覚異常の方にどう見えているのかが確認できるChromeの拡張機能、「Colorblindly」を紹介します。
着せ替え人形のように人物イラストを作成できる Humaaansはパーツを自由にカスタマイズして人物イラストを作成できる、フリーのイラスト素材です。髪型やポーズ、服装、皮膚の色など全てのパーツがシンボルで管理されているため、クリックして選ぶだけで簡単に好みのイラストを作成することができます。現在はSketchとInVision版がダウンロード可能。 イラストのテイストは、海外のWebサービスなどでよく見かけるようなオシャレでフラットなデザインのもの。変に癖が無いので、様々なシーンで使えそうです。 実際にイラスト作ってみた 今回はSketch版をダウンロードしました。ベースとなるのは、立っている人物と座っている人物の二種類。 パーツを選択したら、シンボル機能を使ってパーツの変更や色の変更をすることが可能です。変更できるパーツはかなり細かいところまで対応しており、髪型や服装はもちろんのこと、ジャ
ウェブ制作において重要な役割を果たす「head」のコード。SEO対策をするにあたり非常に大切な部分です。サイトの顔にもなりうるheadタグ内は、GoogleのランキングやソーシャルメディアのOGPを設定する役割があります。 今日はそんな無料メタタグ確認・編集ツールである「Meta Tags」を紹介します。
Customise, adjust and download free vector icons. Ikonate is an adaptable set of optimised, accessible SVG icons that use can easily use in both development and design apps such as Sketch and Photoshop. Ready to use as images, inline SVGs or SVG sprites. Ikonateはサイト上でアイコンのカスタマイズができ、欲しいアイコンだけを選択しエクスポートができるサービスです。 最初から必要なアイコンのみを選択してダウンロードできるので、zipファイルの中身から探し出し…なんて手間もないですし、容量の大きいファイルをダウンロードして重くなることもあ
ストアからいろんなサービスのUIキットがGETできる FramerXを使って色々見ていた中で驚いたのが、このストアの中身です。 いろんなサービスやWebサイトのUIキットがアプリケーション上でそのままインストールでき、インストール完了次第コンポーネントの中に自動的に入るので、すぐに使うことができます。例えるならVSCodeのカスタムインストールのような感じです。Sketchでもプラグインを入れる機能はありますが、あらかじめプラグインの名前・機能を知っていなくてはならなかったり、機能の詳細なんかは一度Webサイト上で検索して日本語訳されたものを読んだ上で、自分の好きなプラグインを入れるようなムーブがありました。しかしFramerXはアプリケーション言語が全て英語でありながらも、プラグインの中身を視覚化し必要なものをその場で判断できる簡潔さがあります。初学者や英語がダメな人でもわかりやすい設計
昨日もデザインツールのプラグインについて説明しましたが、今日もデザインツールに関して書こうとしています。 昨日紹介したSketchと並ぶ勢いのAdobe XD。今日はそんなXDの無料で使えるワイヤーフレームをピックアップしてご紹介します。 ただ今回紹介するものは海外の作者さんが中心となるので、中身をよくみてダウンロードしてみてください！ 簡易ワイヤーデザインツールとしては敷居の低いXDですが、公式のワイヤーフレームはみなさんご存知なのではないでしょうか。
未だになくならないInternetExploreでの閲覧環境…。久しぶりにWindows・IEでのブラウザチェックをしなければいけなかったので、Windowsの仮想マシンをインストールしました。そのときに行ったもろもろの設定をまとめました。 VirtualBoxのインストール まずはWindowsの仮想マシンを動かすためにVirtualBoxのインストールが必要です。 ダウンロードページはこちら Free Virtual Machines（旧modern.IE）のインストール 前はmodern.IEというプロダクト名だったのが、いつの間にか名前が変わってリニューアルしてました。2018年7月現在、公開されているのは以下のバージョンです。 IE8 on Win7 IE9 on Win7 IE10 on Win7 IE11 on Win7 IE11 on Win8.1 MSEdge on Wi
技術検証のためにちょっとしたWebアプリを作ってるんですが、UIを組むのにゼロからデザインを作るのがめんどくさいのでCSSフレームワークを使うことに。いつもだったらBootstrapを使うんですけど、なんかそこまでじゃないんだよな〜それにBootstrap感マジ嫌いなんだよなーということで、別のフレームワークを使うことに。 色々探してたら超軽量なCSSフレームワーク「Milligram」を見つけたので試したところ、なんかいい感じだったので紹介します。 とにかく軽い 「A minimalist CSS framework」のキャッチコピーをうたっている通り、軽い。軽いです。なんとOnly 2kb gzipped! 使い方 Google Web FontsのRobotoと、normalize.cssを組み合わせて使います。 CDNで使う場合はこれを<head>の中に書けばOK。 <link r
EmmetというのはHTMLやCSSを効率よくコーディングするためのプラグインで、SublimeText・Dreamweaver・Bracket・Atomなど様々なエディターやIDE（統合開発環境）で利用することができます。もともとはZen-Codingというものでしたが、その次期バージョンがEmmetです。 例えばh1と記述したものをEmmetで展開すると<h1></h1>とコードが生成されます。 VSCodeでEmmetを使う 今回はMicrosoftのVisual Studio CodeでのEmmetの使い方を説明します。 まだ使ったことない方はこちらから Visual Studio Codeへの乗り換え。これは結構オススメかも…！ VSCodeは初期設定の状態でもEmmetが使えるようになっています。 インストールできたら、HTMLファイルを作成し、試しにhtml:5と記述をしてT
止められたサービスたち Osushi https://osushi.love/ 「頑張った分だけお寿司をもらおう」という投げ銭サービス、Osushi。Stripeの利用規約に抵触していた以外にも、バグ・法律的にアレな部分がたくさんあってサービスが一時停止。最初は現金をそのまま送金できるようなサービスでしたが、今はポイントを商品と交換できるようなサービスに変わっています。 チャイ https://chai.gift/ Twitterでメンションを飛ばすだけで相手にポイントを送信し、そのポイントがアマゾンギフト券に交換できるというサービス。4月の前半にサービスが開始されましたが、あえなくStripe社から利用停止されてしまったようで、4月20日にはチャージ機能が停止してしまいました。一時停止ではなくサービス自体終了するようです。100円分だけチャージして配りまくっていたので残念です。 ONEP
ポイントを送ったり受け取ったり出来るサービス チャイはツイッター上で、特定のユーザーにリプライを飛ばすことでポイントを送ったり、逆に受け取ることが出来るサービスです。 ポイント購入にはStripeを利用 まずは人にあげるポイントを購入する必要があります。決済システムにはStripeが使われているようです。あまりStripeの規約に詳しくないんですが、こういうポイントだったら良いんですね。 受け取りはAmazonギフト券で 現金での引き出しには対応してなくて、Amazonギフト券で1円〜受け取ることができます。 あれ？手数料は…？ このサービス、どうやって儲けてるんですかね？500円課金したら500ポイントもらえて、1ポイント1円でAmazonギフト券に交換できてしまうんですけど。カード決済手数料とか考えたら赤字なんじゃ…？ マネロンとかに使われなければいいんですけど。 現在は招待制です 現
今月は過去最高のアクセスを記録 2017年の10月に最高記録を達成してから、しばらく毎月微減を続けてたんですが、今月はなんと再び返り咲いて過去最高を更新しました。うれしい。 デザインツール動向 Sketchバージョンアップで、ついにプロトタイピング機能を実装 これは先月末のことになりますが、今月も引き続き話題だったので。
2018年、ついに待望のデザインツール「InVision Studio」がリリースされました。InVision StudioはWebサイトやスマホアプリなどの画面デザインを作る専用のツールで、ベクタードローイング・レスポンシブ対応・プロトタイピング作成機能・アニメーション編集・チーム間での共有・座標、サイズ、カラーなどのエンジニア向け確認画面などが備わっています。UIデザインツールとしては、他にもSketch・Adobe XD・Figmaなどが類似のものとして挙げられます。 この「InVision Studio」の使い方では、初心者の方向けに主な機能についてお伝えします。 目次 InVision Studioを手に入れるには 起動・ログイン デバイスの選択とアートボード作成 オブジェクトの作成と編集パネル レイアウトについて アニメーションの作り方 スクロールの設定について コンポーネント
先日、知人からWebサービスをはじめたいけど何からはじめればいいかわからないと相談を受けました。 プログラミング・Webデザインについては本やスクールなどがたくさんあるので学ぶことができます。しかし、Webサービス全体を包括的かつ体系的に学ぶには、どうしてもサービスを運営している会社で働く…という選択肢になってしまい、あまり機会がないのかもしれません。 僕は会社員・個人として、さまざまなWebサービス立ち上げに関わってきました（残念ながら大きく一発当てたことはありませんが）。その中で培ってきた「Webサービスのはじめかた」を、少しずつですが書き起こして記事化していきたいと思います。 先日、マシュマロを運営しているだーすーさんとこんな話題をTwitter上でこんなやりとりをしました。 わかります。それぞれの専門分野を学べる場はあるけど、運営を体系的に学べる場はないですよね。Webサービスは事
先週はSketch、Figmaの話題が熱かったですが、Adobe XDにも大きな動きが…。 なんと本日のアップデートでSketchとPSDファイルを取り込んでXDファイルにしてしまうという驚きの機能が発表されました！ﾋｨ～！！ Adobe XD CCの最新機能はこちら PSDファイルをXDファイルに XDで直接PSDファイルを開くだけで、PhotoshopのデザインやアセットをXDで使用できます。ファイルを開くと自動的に新しいXDファイルに変換されるため、デザインとプロトタイプ作成をすばやく簡単におこなうことができます。 どうやらXDでPSDを開くとそのまんまファイル変換されてXD上で編集できる様子。むむむ！なるほど…。 SketchファイルをXDファイルに SketchのデザインやアセットをXDに直接読み込むことができるようになりました。XDでSketchのファイルを開くと自動的にXDフ
どこも人手不足らしいじゃないですか 日本は人口が減っているし、若者は少ないわけだし当たり前なのか…それとも… 色んな会社の方にお会いするたびに「デザイナーがいない」「採用できない」って声を聞いたりします マジでデザイナー、足りてないみたいです 日本にWebデザイナーは何人いるのか？ じゃあ実際、Webデザイナーって日本に何人いるんですかね？ いろいろググったりしてめっちゃ調べたんですよ でも全然わからなくて。 こういう記事もありました。 転職市場を考えてみたら、デザイナー採用のほうがさらに難しかった（前編） さすがにデザイン制作会社で従事してるWebデザイナーが1,733人ってのは少なすぎると思うのですが、Webサービス事業者で働いてるデザイナーが1万人弱ってのはなんとなくそんな気が。 1〜3万人とか？多くて5万とか？ これ、マジで国勢調査したい。 本当に足りないのはプロジェクトマネージャ
siori.desginにたどり着くまで…この5年間で作ったプロジェクトを一挙公開。ゼロイチに本当に必要なものってなんだ？ 僕が前にWebデザイナーとして働いていたgloopsという会社では、一度だけ新規事業のコンテストが開かれたことがありました。当時gloopsはモバゲー向けのソーシャルゲームに売上を依存していたため、スマホシフトをしていくにあたって、何か手探りで新しいことをやらなければいけないという状況だったのだと思います。 僕は同じチームで働いていたエンジニアの友人２人と、今考えるとマジでクソみたいな企画を作って、ろくに練習もせずにピッチに臨み、見事に玉砕したのですが、そのときに事業を考える楽しさや難しさ、そして自分の中に込み上げる「人の役に立つものを作りたい」「新しい価値を生み出したい」という抑えられない衝動を感じたのでした。 それからというもの、僕は会社で働きながら、何度も自分で
β公開なしでいきなり発表…？！ これまでSketchは新機能についてはβ版でリリースを行い、一部のユーザーに使ってもらってから正式リリースするというのが定番でした。 しかし今回はあまりに突然の発表…。何の前触れもなくバージョン49の新機能として組み込まれていました。 今回のバージョンアップに合わせて、Sketchのランディングページもリニューアル。プロトタイピング機能を動画で説明する内容になっています。 気になるその機能は…？ SketchをバージョンアップしたらFile→New from Template→Prototyping Tutorialを開いてみましょう。 ページ遷移が行われる箇所にはオレンジ色の矢印の曲線が描画されています。 Link・Previewが追加されています。Sketch Cloudについても変化が。 プロトタイピング機能の使い方 まずはリンクエリアにしたいレイヤー
スタートアップで働いているとよく耳にする言葉をコツコツと書き溜めていくシリーズ第5弾です。前回のはこちら「リテンション」サービスをユーザーが継続して使うこと。サービスの継続率はスタートアップの初期には特に重要視される指標となる。また、人事でも社員が会社に定着することをリテンションと呼ぶ「ブラックハット」Googleなどの検索エンジンにおいて、検索順位を不正に操作する手法のこと。最近では検索エンジン側の対応も早く、すぐに通用しなくなる。逆に正攻法のやり方はホワイトハットと言う「レガシー」遺産という意味... DD（デューデリジェンス） デューデリ。M&Aを行う際に買収の対象企業を調査すること。財務・法務・税務・事業の実態などあらゆる側面から専門家による調査が行われ、買収した際のリスクを洗い出したり、買収後のシナジーを検討する材料にしたりする。 ユニットエコノミクス 顧客１人（法人などの場合は
良いウェブサービスを支える「利用規約」の作り方、を読んだんですが大変勉強になりました。 こんな人にオススメ Webディレクターさん（特に事業会社の） 起業家さん どんなときに読むか 今回は人の手を借りずに利用規約を作らなければという状況だったので、すがる思いで買ったんですけど、ホントに助かりました。そしてこれは自社でWebサービスを展開している会社なら、絶対に１冊は置いておいたほうがいい本かと思います。 今まで利用規約やプライバシーポリシーって、法務とか情シスの方もしくは顧問弁護士事務所の方にお願いしていたりしたんで、そこまで真剣に考えたことってなかったんですよね…。まあどうせみんな読んでないしって思ってたんですけど、この本読んで「あれ？うちの会社の利用規約って…」と思うところがあったり。 仮想通貨まわりでトラブルも相次いでいますし、最近のスタートアップには結構難しい商材やサービスを扱って
Figma raises $25 million to take on Adobe with a browser-based interface desi... https://venturebeat.com/2018/02/02/figma-raises-25-million-to-take-on-adobe-and-invision-with-its-browser-based-interface-design-tool/ Figma, an interface design and prototyping tool that works in the browser, has raised $25 million in a series B round of funding from Kleiner Perkins, Greylock, and Index Ventures. Fou
最近ありがたいことに、ブログを読んでくださった方や前に一緒に仕事をした方から、UIやUXの意見を聞かせてほしいという話をいただくようになりました。 で、だいたい会ってお話してみると、UIデザインの話よりも作り方の話、さらには制作の体制や、組織の話に行き着く…というのがいつものパターンで、組織を変えなきゃ根本的な問題は解決しないよねって話に落ち着くことが多いです。 するとデザイナーじゃない方に、デザインの話をしなきゃいけない。どうしてデザインが大切なのか、ここ最近デザインが盛り上がっている歴史的背景を一通り話して、「あーやっぱりデザインって大事だね！」って思ってもらうまでにまずひと苦労。で、そこから何を取り組めばいいかなんて話をする…ああ！なんて手間がかかるんだ…。苦手なんです、難しい話するの。実際、「すごい」「やばい」くらいしか僕言わないんで。 だんだんめんどくさくなってきたんですよね…
ファイル形式はSketchとPhotoshop。 テンプレート78個 26種類 250個以上のUIパーツ たくさんの手作りのコンポーネント 簡単に編集できるWebフォント などなど。盛りだくさんの内容になっています。
デザイナーの組織化によって生まれる様々なスキルやロール この本の中では、ここ近年のデジタル方面のデザインが内製化してきていること、そして組織化してきていることが語られています。 「デザイン組織」が作られる中で、デザインを作る以外にも色々なスキルやロールが生まれてきているようで、様々な職種が紹介されていました。 プロダクトデザイナー コミュニケーションデザイナー UXリサーチャー サービスデザイナー クリエイティブテクノロジスト などなど… その中でも僕が気になったのは「デザインプログラムマネージャー」という仕事です。 デザイン専門のプロジェクトマネージャー？ 「デザインプログラムマネージャー」と聞いて、どんな仕事を思い浮かべますか？マネージャーだから…管理職？プログラムもついてるし、デザイナーとエンジニアを統括する管理職？ この本によると「デザインプログラムマネージャー」とは デザイン業務
With the Gif.me sketch plugin you can play gifs and videos inside sketch app while you're designing. 開始の手順 プラグインのインストールだけでは動かないので注意。 ターミナルでHomebrewをインストール brew install ffmpeg プラグインをインストール 詳しくはこちらから https://github.com/kannonboy/sketch-gifme-plugin 使い方 SketchのプラグインからGif meを選択 貼り付けたいGifアニメのファイルを選択 貼り付け完了 注意 サイズ変更したりするとアニメが動かなくなっちゃいます。 ffmpegをインストールしていないMacでGIFアニメが貼られたファイルを開くと見れません。 対応しているファイル GIFアニメ
主な機能 Sketch上でタイムライン・キーフレーム上でアニメーションが作れる MacアプリのKeynoteのマジックムーブや、After Effectのタイムラインの感覚で、要素の移動・サイズ変更・回転などのアニメーションの演出を加えることができます。 こんな感じで画面の下部にタイムラインのコントローラーが表示されます。 GIFアニメ・動画を出力 作ったアニメーションはGIFアニメ形式かMP4形式で出力することができます。今までSketchでGIFアニメを作れなかったので、そのときだけPhotoshopを使っていた人もいるのでは？ プレセール中は半額の39ドル こちらのプラグイン、リリースは3月を予定しているようです。今なら先行予約に申し込むことができ、期間中なら半額の39ドル/1年間で利用できます。 余談：Animaを作ったのはYoの人…！ このプラグインを作っているAnimaは、実は
InVision社、基本はリモート 先日知人から、以前ニューヨークを訪れたときに、InVisionに訪問しようと試みてコンタクトを取ってみたところ「みんなリモートだからオフィスないんだよ」と断られてしまったというエピソードを聞きました。 うざいから断られただけなんじゃないの〜と笑い話になっていたんですが、どうやらマジで彼らは完全リモートで会社を成立させてるみたいです…。 国が違うから時差がある InVisionのメンバーは色んな国に散らばっているので（確か20カ国以上だったはず）、もちろん時差があるわけで。東部標準時の午前10時〜午後6時をベースとしながら、4時間ぐらいは一緒に仕事ができるように勤務時間を調整しているようです。 大事なことはビデオで録画 ビデオもかなり活用しているみたい。大事な決定は録画してみんなに共有しているみたいですね。実際何かツールを使っているんでしょうか？気になる
InVisionがデザインツールに投資する500万ドルのファンドを発表。InVisionが目指すのはセールスフォース？！
最近入れたオススメのMacアプリです。 プレゼンをしようと思ってプロジェクターを繋いだ瞬間、デスクトップに見せちゃいけないやつが！ もしくはプレゼン中にSlackの通知がガンガン飛んできてファッてなる そんなときのためのMacアプリです。
次のページ
このページを最初にブックマークしてみませんか？
『TECHNICAL CREATOR』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
