webpackのloaderであるvue-loaderでPostCSSを使ってみる。 webpackの設定 webpack.config.js const webpack = require('webpack') const path = require('path') module.exports = { entry: [ path.resolve(__dirname, 'src/index.js') ], output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ // 他のloaderの設定 // vue { test: /\.vue$/, loader: 'vue-loader' } ] } } src/index.jsをバンドルしてdist/bundle.
Adobe XD CC – Is it worth to switch from Sketch?ThalionNovember 26, 2017October 27, 2018 The time when the Photoshop was the king and Illustrator its queen in the design industry is a history. Almost every designer that create UI sooner or later started to love Sketch app. It looks like Adobe noticed that it has lost a niche. Now, the empire strikes back. Let’s compare Adobe XD with Sketch app. Th
最近は、ソフトウェアの新しい技術や、考え方の日本に対する導入の遅れをどうやったら無くすことができるか?ということを考えている。今回はインターナショナルチームに参加して感じたマネジメントスタイルの違いについて書いてみたい。 海外企業のリーダーシップスタイルの変化 ソフトウェアの世界では、2001年にアジャイル開発が登場以来、それ以降のパラダイムでは、「サーバントリーダーシップ」と呼ばれるタイプのマネジメントスタイルが主流になっている。 従来型のスタイルは「コマンドアンドコントロール」というスタイルで、リーダーが部下に指示をし、リーダーは部下の状況を把握、確認し、管理していく。一方、サーバントリーダーシップの場合、リーダーは、ビジョンとKPIを示すが、実際にどのようにするかは、チームが自ら考えて意思決定していく。 この考え方は、既に1969年に発表されているらしいというのを下記の本で知った。
読者の皆さんは、VR・AR・MRの違いや定義をご存知だろうか?まずは市場規模を見てもらいたい。ゲーム市場調査企業SuperDataよれば、2012年から2016年までにVR・AR・MR分野に41億USドル(約4500億円)が投資され、2017年は約16億ドル(約1,800億円)が投資される見通しとなっている。 また、今後もこの業界を中心に投資が伸びることが予測がされており、市場調査企業IDCのリサーチによると、世界のVR・AR関連の支出は、2021年まで毎年倍増していくとの見方がある。具体的には、総支出額は2017年の114億ドルから2021年には2150億ドルに増加し、年間平均成長率は約113%になる見込みだ。 このように、VR・AR・MRの市場規模は非常に大きく、現在ゲーム業界にとどまらず医療、小売、不動産など様々な業界が注目している。今回はそんな話題の3つの技術について、その定義から
ペーパープロトタイピング講座シリーズ。第1回は導入編。 第1回はの導入編。ペーパー・プロトタイピングとは何なのか、何故必要なのか。そして導入することで、どんな利点があるのかを説明する。 ペーパー・プロトタイピングって何? ペーパー・プロトタイピングとは、紙で実際にアプリやサイトを「実装する」ことである。 通常の開発においてコンテンツが使いやすいかどうかは、開発が終盤になるまでわからない。このため「作ってはみたが使いにくい」や「いまさら後戻りできない」という問題が発生する。UIや手触りが重要なモバイル系のアプリにおいて、これは致命的な問題になる。ペーパープロトタイピングはこの問題を低コストで解決する。 紙とペンで動作モックを作成することで、本実装を行う前に、素早く手戻なく検証を行うことができる。これにより、仕様書策定や実装前にPDCAのサイクルを実現できる。作業負荷の高い本実装を行う前に軽く
シビルウォーに繋がるMCU映画を全部見直してから劇場に行きました。スティーブ・ロジャースみたいなカリスマと指揮能力の高さが欲しいkskです、こんにちは。(環境的にはトニー・スタークになりたい) そもそも、デザインとは何なのか? デザインは「モノに意匠を施す」だけの作業ではありません。課題を解決することがデザインの目的です。使う人の体験や、それらを取り巻く環境・社会にいい影響を及ぼす…と書くと大げさに聞こえるかもしれませんが、いまから50年以上も前の1964年に起草されたデザインマニフェスト「First Things First (1964)」にもその思想は書かれています。このマニフェストはその後2000年に「First Things First (2000)」として改訂され、デザインの力をより『課題解決』に使うべきと宣言しています。 「課題解決をする人」=デザイナー 「デザイナー」といって
RikkeはInternational Design Foundationの共同創設者およびチーフ編集者です。 プロトタイピングは、一般的にデザイン思考やユーザー体験をデザインする際に欠かせないものです。これは、アイデアをすぐにテストして、状況に適した手法で改善することができるからです。スタンフォード大学のデザインスクール(d.school)では、「行動重視の姿勢」が推奨されています。これは考察や会議よりも、実際に構築することやテストすることを重要視するものです。 しかしなぜプロトタイピングがデザインのプロセスでそれほど重要なのでしょうか? もっと言えば、ユーザーを第一に考えたデザインの解決策を考え出すのに、どのように役立つのでしょうか? プロトタイプを作成して仮説を検証する前に、プロトタイピングとは何か、なぜプロトタイピングをするのか、どのように行うのかについて、詳しく理解していきましょ
こんにちは。デザインリサーチャーのKeikaです。 以前上海へ訪れた際に、現地のデザイナーたちに「GoodpatchではProttを使ってプロトタイプを作る」という話をしても、ほとんどの人に「Prottって何?」という反応をされました。 一体彼らはどんなプロトタイピングツールを使い、どのようにしてプロトタイピングを行なっているのでしょうか? この記事では、気になる中国のUX・UIデザイナーたちのプロトタイピング方法をリサーチしましたので、その内容をご紹介します。 (「プロトタイピングってそもそも何?何のために行うの?」という人は過去記事をご参照ください。) 実務で活かせる!プロトタイピングの具体的な進め方とは? プロトタイピングが社内に平和をもたらすのはなぜ? 上海・アクセンチュア|Axureを選ぶ理由 国際的にビジネス展開している大手コンサルティングファーム・アクセンチュアに10年も勤め
「ユーザーヒアリングは社員全員で行け」WHILL杉江氏らが語る”俺のプロトタイピング”【KT16-5B #7】 2017 3/22 【公式LINE@はじめました】友達申請はこちらから! 「IoT/ハードウェア・スタートアップのケース・スタディ「WHILL」「ソラコム」「UMITRON」」【KT16-5B】セッションの書き起し記事をいよいよ公開!9回シリーズ(その7)は、登壇者の方々に、起業初期の製品開発において大切だったことについてお話しいただきました。是非御覧ください。 ICCカンファレンスは新産業のトップリーダー160名以上が登壇する日本最大級の招待制カンファレンスです。次回 ICCカンファレンス KYOTO 2017は2017年9月5〜7日 京都市での開催を予定しております。参加者の募集を開始しました。 登壇者情報 2016年9月8日開催 ICCカンファレンス KYOTO 2016
Supership デザイナーの若林です。アプリやWebサイトのUI/UXに携わっています(と言っても3月入社の新人ほやほやです)。 最近プロトタイピングツールが増えていますが、実際どれが一番実務に適しているんだろう?と気になっていたところ、良い機会をいただいたのでデザイナー観点で実際に(ざっくり)触った感想と比較をしてみたいと思います。 代表的なツールと種類・トランジション型(遷移):Prott、Adobe XD、inVision、CanvasFlip、Marvel ・インタラクション型(アニメーション):Origami Studio、Framer ・複合型:CRAFT + inVision、protopie、Principle、flinto、atomic 大まかにこのような分類で上記のようなツールが代表的かと思います。現在、当チームでは主に「Sketch」でUI制作、「Prott」でプ
JavaScript学習に役立つお話がありました。 「プロトタイピング」でプログラムを試作する練習について紹介されています。 www.webprofessional.jp (前回に引き続き、今回もこのお話から学んでみたいと思います。) jsstudy.hatenablog.com アプリ作成の進め方として、以下の手順が紹介されています。 最初に基本を身に着けよう 計画を立てる コード無しで書いていく 小さな部分に分けて製作する 各パーツを結合する 実験とテスト 外部の助けを求める コードのリファクタリング(再構築) 試行錯誤の重要性 現実には、プロジェクトは完璧なコードをガンガン書くことではなく、たくさんの試行錯誤とリファレンスを幾度も参照して少しずつできあがるものなのです。 実験とテスト この段階ですでに、たくさんの実験とテストを繰り返して動作確認をしてきました。 きちんと動作するならば
Appleが10年前の2007年6月29日に販売開始したiPhoneほど世界を変えたものはあるでしょうか?なかなかすぐには思い浮かばないと思います。しかしこの究極のスマートフォンは、いくつかのCAD設計とプロトタイプの変遷を経て誕生したものです。 LEANDER KAHNEY氏が、その著書Jony Ive: The Genius Behind Apple’s Greatest Productsより、Cult of Macにその一部を披露しているので、その画像に注目しつつ要約してご紹介します。 初代iPhone-iPhone 2Gの最終に近いプロトタイプ マルチタッチデバイスに特化したデザイン 上がジョニー・アイブが初めて描いたiPhoneのデザインです。真ん中と右はほぼその後のiPhone初代機そのもののデザインとなっています。一番左だけ、ちょっと違いますね。 当時、マルチタッチインターフ
電通内に、顧客企業のイノベーションを創出するための組織「電通ビジネスデザインスクエア」が発足しました。本連載では、メンバーが「電通の考えるビジネスデザインとは何か」をお伝えします。第2回はビジネスデザイナーの坂巻匡彦氏が、プロトタイピングについて語ります。 ※プロトタイピングとは:実働する試作モデル(プロトタイプ)を早期に制作し、利用者に機能や操作性を確認してもらい、その要望を反映させる開発手法。 【目次】 ▼機能差別が難しくなったプロダクトや、参入障壁の低いサービスには体験価値での差別化が必要 ▼「最高のアイデアだったのに、実際に作ると面白くない」をプロトタイプで回避 ▼プロトタイプを三つに分解して考える ▼全く新しいアウトプットを生むためのプロトタイプ ▼ビジネスの先進性と不確実性のジレンマにプロトタイピングで挑む プロダクトやサービスには体験価値での差別化が必要 はじめまして、ビジネ
Liquid CSS窓ガラスに張りつく水滴。コロコロ転がる水銀。 接近する液体同士が表面張力で引かれ合う様子。 これらは物理現象ですが、デザインにおいても液体表現は面白いですよね。 実は、 CSSだけでも 近い表現が可能です(※制限あり)。 まずは作り方、 簡単3ステップ で解説します。 下のサンプルをご覧ください。 See the Pen Demo: Liquid CSS by Yusuke Nakaya (@YusukeNakaya) on CodePen. blur 親要素に filter プロパティの blur() を指定します。 全体の描画がボケます。 contrast blur() と同時に contrast() も指定します。 ボケた描画のコントラストを上げます。 background ボケ感+高コントラストの要素にさらに background で背景色を指定します。 すると
Introduction Modern CSS is a powerful tool you can use to create many advanced User Interface (UI) features. In the past, these features relied on JavaScript libraries. In this guide, you will set up a few CSS lines to create a scrolling parallax effect on a web page. You will use images from placekitten.com as placeholder background images. You will have a webpage with a pure CSS scrolling parall
<p class="f">Give me 5000 trillion yen</p> <p>Give me 5000 trillion yen</p> @font-face { font-family: number; src: local('Hiragino Mincho ProN'); unicode-range: U+0030-0039; } .f { font-family: number; } font-face を定義し、 unicode-range で数字の範囲だけ指定すれば OK。 サンプル(CodePen) なお Google Fonts を使う場合はもっとかんたんで、 https://fonts.googleapis.com/css?family=Anton&text=0123456789 というように数字を指定して読み込めばOK。
WordPressには検索フォームが標準で搭載されていますが、デフォルトのままではデザインや仕様がテーマに合わない可能性があります。テーマに合わせて、検索フォームのデザインや仕様をカスタマイズして自分のサイトに合う検索フォームを設置しましょう。 今回は、WordPressに標準で搭載されている検索フォームを自由にカスタマイズする方法についてご紹介します。 検索フォームをカスタマイズする searchform.phpを作成する WordPressに標準搭載の検索フォームのデザインを変更するためには、テーマファイル内に『searchform.php』というWordPressテンプレートを新しく作成する必要があります。 『searchform.php』を作成することで、検索フォームを呼び出す『get_search_form() 』関数や検索ウィジェットは『searchform.php』テンプレー
スマートニュース(SmartNews)風の表示とは 「スマートニュース(SmartNews)」とはスマートフォン用のニュースアプリです。巷では略して「スマニュー」なんて呼ばれています。 読み込みが速いため、いつも情報収集にお世話になっているアプリですが、レイアウトも見やすいんですよね。縦だけでなく、2〜3列で横並びになったりと見た目に変化があって記事が見つけやすいんです。 SmartNews ただ、この見た目をfloatやdisplay: inline-block;で実装しようとするとかなり面倒…と思っていたそんな時、柔軟に対応できるFlexboxの存在を知りました。次からは、Flexboxを使った実装方法をお伝えしていきますよ! 以下が実装用のコードです。「CSS」のタブをクリックして確認してみてください。 See the Pen Flexboxでスマートニュース(SmartNews)風
What in the world could オントロ (ontoro) and グスーム (gusūmu) possibly mean? (If you wait a few seconds, a hint will flash in the animated GIF above.) Continue reading… The UTC #160 meeting took place last week at Microsoft’s HQ in Redmond, Washington. For CJK enthusiasts, the big news is that the UTC accepted CJK Unified ideographs Extension G (aka IRG Working Set 2015), which includes 4,939 characters
こんにちは。サービスグループの武田です。 社内で、「ブログでリンクを追加するときどうしてる?」という話題で盛り上がりました。 大きく次の4とおりの意見がありました。 WordPressのLinkボタンで追加する Markdownだから気にせず書いちゃう ブックマークレットを登録して使っている ChromeのCreate Linkプラグインを使っている 今回は最後のCreate Linkを自分でも使ってみたので紹介します。また「自分はこうしてるよ!」という情報ももらえたので、それも併せて紹介します。 Create Linkのインストール インストールおよび基本的な使い方は、過去に解説した記事がありますのでそちらを見てください。 ブログに Web ページを貼るときは「Create Link」が便利! フォーマットのカスタマイズ インストールが完了したらデフォルトでは次の4つが設定されています。
11月22日に開会した熊本市の定例市議会に、生後7カ月の長男を抱いて議場に入った緒方夕佳議員。 結果として子どもを連れての出席は認められず、議会の開会は40分ほど遅れた。その行動には、賛否両方の意見が集まった。熊本市議会は、文書による厳重注意処分を決めた。 緒方議員の狙いはどこにあったのか。海外で報じられるまでに騒動が拡大したことについて、どう感じているのか。BuzzFeed Newsは本人に直接取材した。 ーーなぜ今回、お子さんを議場に連れてきたのでしょうか 世の中には多くの働く母親が直面している「厳しさ」があります。 仕事と子育てが両立できない、0歳児でも預けないといけない、預けられないから仕事を諦めたーー。議員活動をしているなかで、多くの子育て世代の人たちから、数限りない声を受けてきました。 職場や社会では「個人の問題」「自己責任」というような形で扱われてしまう。負担がのしかかりなが
A designer typically has a long stream of projects, each demanding innovative and imaginative solutions. How to keep up and keep sane? You need a balanced approach. Traditionally, there’s a distinction between UX and UI. UX is all about collecting data about the brand, product, client, designing the user interface, and is generally a process totally aligned with rational, left-brain activity. Here
せかいいっしゅうしましょう じぶんのいきたいところにいきましょう むずかしいことはなしにして さぁ、いきましょう 「なんで!?しっかり英語を話しているはずなのに、なぜか相手に全然通じない!」なんて経験を海外でしたことがある方は少なくないと思います。 海外で英語が通じない原因はいろいろと考えられますが、もしかしたら日本で作られた英語のような言葉、つまり「和製英語」のせいで英語が通じにくくなっているのかもしれません! 今回は海外ではまるで通じない和製英語をまとめて紹介します。 ノートパソコン→Laptop photo by unsplash 日本では完全に「ノートパソコン」という名前が普及した薄型のパソコンですが、実はこのノートパソコンという言葉は完全な和製英語!海外では一般的に“Laptop”(ラップトップ)と呼ばれています。 海外の空港の手荷物検査では、「Laptopはカバンの中から取り出
This is an example of a detailed registration form with validation, designed using CSS, HTML, JavaScript, and Bootstrap framework 4. The body of the form is given a background color as RGB(252, 228, 236). The form consists of input text fields, radio buttons, drop-down lists, and a submit button. The banner section of the form is given a background color as RGB(233, 30, 99). The JavaScript methods
There is one principle of organization that every human should adhere to, particularly people who design products. Day after day, I see companies break this rule, and it is 100% of the time to their detriment. In this article I will explain what that rule is, and what it means to product and service design. I’ll also raise the possible implications of this phenomenon on organizational management,
世間一般ではデザイナーは一括りに語られがちですが、デザイナーも千差万別、一人一人に個性があり、異なる価値観を持っています。この多種多様なデザイナーを一種類にまとめて扱うことは、デザイナーとのミスマッチに繋がり、デザイナーを擁する組織のマネジメントにとって、深刻な問題を引き起こすこともあります。 自分自身は経営者兼デザイナーとして仕事をし、今まで多くのデザイナーを見てきました。その私の経験則でいえば、デザイナーは大きく4つのタイプに分類できると考えています。例えば採用面接などで新たにデザイナーと出会った際には、まずはこの4タイプを手がかりにして、その方の理解を深めていったりします。 私が考えるデザイナーの4つのタイプとは、縦軸に「挑戦的」「保守的」、横軸に「感覚的」「論理的」を置いた4象限で表現できます。以下がその図です。 ここからは、理想実現型、成果追求型、共同作業型、実務遂行型の順に、そ
Discover the ultimate SVG animation platform. Animate illustrations, logos, icons, and more.No coding skills required. Animate in minutesIntuitive interface Packed with all the tools you need, SVGator is the ultimate SVG animation generator: a thoughtfully designed, intuitive interface, right at your fingertips. Quick workflow Take your SVG to a whole new level without writing a single line of cod
デザインの正解は、なんだかんだ現場によって作られている。じゃあデザイナーである私はどうするのが正解なのか考えた。 エンジニアばっかりのベンチャーに入った当初、ことごとく自分のやりたいデザインが通らなくて、悩んでいた。 言語化が下手くそだったこと、ベンチャー立ち上げ当初にしては経験が浅く、自分だけで完結する細部の調整ばかりに目がいっていたことが原因だったように思う。 毎日、上司とやりとりするもののデザイン案を通すことができず、自分を全否定されたような気分になっていた。「自分は全部が間違っている」と思い込み、基準が揺らぎ、どこにももたれかるところがない空間でふらふらしているような、不安でいっぱいの日々だった。 実は、あの頃考えていたデザイン案やUIの修正案を、タイミングを見計らって実現する作業を2年経った今、やっと進められている。考えていることは、ほぼ変わっていない。どの案がいつ実現できるかと
Mac用プロトタイプツール「Sketch」のCrack版などに潜み、感染したMacを暗号通貨マイニングに利用するトロイの木馬型マルウェア「OSX.CpuMeaner」が発見されたそうです。詳細は以下から。 アメリカのセキュリティ企業SentinelOneによると、2017年11月中旬からアプリのCrack版を配布しているWebサイトやYouTube動画から、Macのプロトタイプツール「Sketch」のCrack版に潜み、ユーザーのMacに侵入、感染したMacをMoneroの暗号通貨のマイニングに利用するトロイの木馬型マルウェア「OSX.CpuMeaner」が出現しているそうです。 In this post, we analyze a new cryptocurrency mining trojan targeting macOS. The malware hides in the pled
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. How do you make a spreadsheet-like interface responsive without the use of any JavaScript? This is the question I’ve been asking myself all week as I’ve been working on a new project and trying to figure out how to make the simplest spreadsheet possible. I wanted to avoid us
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く