Brackets - Web デザインを認識する最新のオープンソースコードエディターIntroducing Phoenix Code Editor Phoenix Code is the next generation of Brackets that Runs everywhere - Windows, macOS, Linux and Web Browsers. Click here to read more.
アトムリビンテック株式会社 - 住まいの金物/金具の製造・販売
ドア・引戸・折戸などの建具金物、クローゼットなどの収納の金具や家具金物など「住まいの金物」の製造、販売。
なぜデザインは人を動かすのか？ 〜「広告」を通じて、デザインの力を考える（前編） | ウェブ電通報
なぜデザインは人を動かすのか？ 〜「広告」を通じて、デザインの力を考える（前編）2015/07/01 ——2015年のアドフェストでは、八木さんが制作されたホンダのコーポレートブランディング「Honda. Beautiful Engines.」が、Design／Booklet部門で最高賞のグランデをはじめ、複数の賞を獲得されました。当財団が運営するアド・ミュージアム東京の企画展示「鉄のマインド One Show 2013」でもDesign／Flyers部門でブロンズを獲得されていますね。さらにOutdoor／Poster部門とPrint Craft／Photography部門、Print Craft／Best Use of Photo部門では、JR東日本「行くぜ、東北。」がブロンズをトリプル受賞されるなど、幾つもの賞を重ねての受賞、本当におめでとうございます（編集部：以下同様）。 八木：ま
コアバリュー - MEMOGRAPHIX
何か作るとき、「一言でそれを説明できるか」をとても重視している。 というのも、以前あるプロジェクトで後悔したからだった。そのプロジェクトは、端的に言って一言で説明できなかった。こうしたい、というビジョンはチームで共有できていたが、それがプロダクトに反映されていなかった。その結果、類似品との違いがよく分からないとか、ほかと比べてあの機能が無い、ここが劣ってるとか言われて、単に表層的な機能の優劣だけで評価されることになった。その後もプロジェクトに関わって、世間の評価も段々と高まっていったからまあまあうまくいったと思っているけど、最初のスタートダッシュでもっとうまくやれたら、もっと成功していたと思う。 それを教訓として、何か作るとき、必ず一言で説明できるようにしている。例えばTumblrテーマで言えば、Illustfolioなら「イラストポートフォリオサイトが一瞬で作れるTumblrテーマ」、Z
LiveReload
LiveReload 2 proudly presents… The Web Developer Wonderland(a happy land where browsers don't need a Refresh button) CSS edits and image changes apply live.CoffeeScript, SASS, LESS and others just work. Citizenship is granted through the Mac App Store. Windows permanent residency issues are being worked out, temporary stay already allowed. What does LiveReload do?LiveReload monitors changes in the
Browsersync - Time-saving synchronised browser testing
Time-saving synchronised browser testing. It’s wicked-fast and totally free. npm install -g browser-sync Get Started Your indispensable test assistant. With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of s
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
高品質な CSS を書く助けになるツール「Nozomi」を作った - I'm kubosho_
2015-06-29 高品質な CSS を書く助けになるツール「Nozomi」を作った CSS Gulp 登壇 リポジトリは kubosho/nozomi です。 JSオジサン「俺の話を聞け、5分だけでもいい」 #5でも、この「Nozomi」について話してきました。 その時のスライドが以下になります。JSオジサンなのに CSS の話をしてしまったのはご愛嬌です。 どんなツールか 書いた CSS をより良くするツールを集めて、npm の run-script (もしくは Visual Studio の拡張機能 Task Runner Explorer)で簡単に実行できるようにしたものです。 具体的には以下のツールが現時点(2015/6/29)で使えるようになっています。 Autoprefixer ベンダープレフィックスを自動的に追加 CSSComb プロパティの順番を設定ファイルをもとに並び
%25E3%2581%25AEcss%25E3%2582%2584%25E3%2583%2595%25E3%2583%25AC%25E3%2583%25BC%25E3%2583%25A0%25E3%2583%25AF%25E3%2583%25BC%25E3%2582%25AF)
マテリアルデザイン(Material Design)のcssやフレームワーク - webhack / ウェブ技術が好き
2015-06-28 マテリアルデザイン(Material Design)のcssやフレームワーク ぼくはbootstrap + Paperを使う事がおおいのですが他にも良さげなcss/フレームワークがありますのでこの記事にまとめて行きます。 1.Materialize Documentation - Materializematerializecss.com bootstrapを使わずにレスポンシブなマテリアルデザインに向いています。カラーパレットをcssで指定できるのは分かり易くていいかなと思います。 2. Polymer https://www.polymer-project.org/1.0/ Web Componentsでサイトを作るのにマテリアルデザインを導入するならPolymerが向いています。更新頻度が速くて開発がどんどん進められている印象です。 3. Bootswatch
【解決編】Retina対応のPhotoshopとかで画像が1/2サイズで表示されて困ってたらこうした方がいいよってみんなに教えてもらった話 - akuyan to
みんなのやさしさで目から汁があふれて画面が見えない…。 今朝方、ここ半年ぐらいずっと困ってたことを改めてブログにして吐き出したのがこちら。 それが世間の皆様の心あたたかいご助言により、めでたく解決したので感謝と感謝と感謝の意をこめて、他の困ってる方々にもお伝えするべく、教えてもらった内容以下にすべてまとめます。 第1希望の「AdobeだけRetina切る方法」 困ってますエントリーの希望としてあげさせてもらった第1希望「AdobeだけRetina切る方法」を、そのものズバリ教えてくださったのはこちらの方。 高橋としゆき（@gautt） Finderの［情報を見る］で［低解像度で開く］にチェックを入れておけばいいのでは https://twitter.com/gautt/statuses/449434490176143360 はてなダイアリーだとツイート埋め込めないんだね… 高橋としゆき (
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
CSS3のブレンドモードが素敵！ 新プロパティmix-blend-modeを使いこなそう – ICS MEDIA
mix-blend-modeというCSSのプロパティ。これはDOM要素を重ねた時の見え方を指定するCSSプロパティです。デザイナー視点だとブレンドモードはごく当たり前に使う機能のひとつ。mix-blend-modeはウェブの表現手法が広がり、デザインの自由度が広がる注目すべきCSSプロパティです。本記事はmix-blend-modeの魅力と使い方をデモを交えて紹介します。 そもそもブレンドモードとは？ ブレンドモードはクリエイティブな表現を作る上での基本機能のひとつです。Adobe PhotoshopやIllustrator、After Effects、XDや、Figmaで搭載されていて、レイヤーを重ねたときにどのように重ねて表示するかの設定になります。ソフトによっては「ブレンドモード」や「描画モード」「モード」と異なる名称が使われていますが、機能としては同じものになります。本記事ではCS
モーダルウィンドウを考える | Accessible & Usable
公開日 : 2015年7月6日 (2024年2月12日 更新) カテゴリー : アクセシビリティ ウェブサイトのユーザーインターフェース (UI) に、「モーダルウィンドウ」と呼ばれるものがあります。ページ遷移を伴わずに、ページ上にウィンドウをオーバーレイ表示させるもので、このウィンドウが前面で開いている間は背景側にある元ページが操作対象外になることから「モーダル」という名称が付いています。実装例としては、フォーム、アラート、画像の拡大表示 (いわゆる Lightbox 系と呼ばれるもの) などが挙げられます。 モーダルウィンドウは、あるページを開いているというコンテキストを維持しつつ付加的にコンテンツの提示ができる利点がある反面、基本的なユーザビリティやアクセシビリティが欠落しているケースが多く見受けられます。以下の観点を意識しながらデザインや実装をすることで、基本的なユーザビリティやア
Git中級者に送る便利なコマンド群 - カイワレの大冒険 Second
Gitを使っていて、ちょくちょく便利だなと思うコマンドに出会うので、メモ残しておきます。実際中級者の方には物足りないかもしれませんが、とりあえず。目次は以下。 自分がいじったファイルを一旦退避させたい ツリーが今どういう状態になっているか確認したい 今まで作業をやったことを振り返って、特定の過去に戻りたい リモートブランチをチェックアウトしたい コンフリクトがあったファイル一覧を表示したい 間違ってremote masterブランチにpushしてしまったので、取り消したい マージコミットを消したい 過去のまとまったコミットをまとめたい ここから載せるサンプルは、以下のフローが既に処理された前提で話します。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 # 適当にファイル作成、push $ touch sample.txt
エンジニアのキャリアの方向性 - クックパッド開発者ブログ
CTO の舘野 (id:secondlife) です。丁度1年半ほど前に、クックパッドの CTO になり、自分が20代の時に憧れていたいわゆるハッカーとは違う道を歩んだという事もあり、ソフトウェアエンジニア*1のキャリアってどんな物があるんだろうと改めて考えた時期がありました。 しかしながら一人悶々と考えても、答えが見つかる物でも無かったので、私の先を行く方々の話を聞きたいんですよね、みたいな事を md2inao で有名な WEB+DB PRESS 編集長の稲尾さんとしていたところ、じゃあそれ連載記事でどうですか、とお話を貰ったので記事として連載させて頂きました*2。 その時、連絡させていただいたメールにはこんなことを書いていました。 背景としては、今やエンジニアは、サーバサイドは AWS/heroku 等 IaaS/PaaS の台頭、github を中心とした OSS フレームワーク・ラ
気が狂った設計 - hitode909の日記
大きめのこととか，自信のないところを触るときは，コード書く前に，こういう作戦考えてみたけどどうですかって聞いてみたり，こういうことやりたいんだけど一緒に考えませんかって，いっしょに話して設計考えたりするとよいと思う． 一緒に考えたすぐあとに気が狂った設計とか言い出したらおかしいので，未然に変な設計のままコード書いてしまうのを防げる． 特に辛い気持ちになるのが、「気が狂った設計」「クソコード」「（こんな実装は）有り得ない」といった言葉だ。 Pull Requestのレビューが辛くて会社をやめたい 単に言葉が強いのはよくないと思う．我が社にはそんな強い言葉でレビュー書く人はいない． 我が社には，普段から強い言葉を発する人もいなくて，みんな物腰柔らかな変な言葉を話している． 言葉使いや文体は，ずっと過ごしてると同僚から移ったりするので，普段からそういう言葉を話していると，全体の雰囲気も悪くなりそ
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
最も創造性が高い思考のモードは、論理と直感の間にある
関西出身。バブル期に証券会社に就職。その後、米国での大学院留学、外資系企業勤務を経て2011年から文筆活動に専念。2005年開設の社会派ブログ「Chikirinの日記」は、日本有数のアクセスと読者数を誇る。シリーズ累計23万部のベストセラー『自分のアタマで考えよう』『マーケット感覚を身につけよう』（ダイヤモンド社）、『「自分メディア」はこう作る!』（文藝春秋）など著書多数。 マーケット感覚を身につけよう 超人気“社会派”ブロガー・ちきりんさんの２年ぶり完全書下ろし『マーケット感覚を身につけよう』が、発売開始１か月で７万部を突破する大ヒットとなっています。 この連載では、イラストによる出版記念講演会の特別レポートや、様々なゲストとの対談を通じて、「マーケット感覚」とは何なのか？ なぜ今、そこまで社会に求められているのか？ を解き明かしていきます。 バックナンバー一覧 『マーケット感覚を身につ
人を動かすキャッチコピーの作り方｜本質的5つのステップ＆テクニック
言葉の力で誰かを動かさなくてはならない機会は、コピーライターでなくとも多く存在しますよね。 お店の集客を上げるための販促物を作りたい！クライアントの心を掴むプレゼン資料を作りたい！ブログのPV数が上がるタイトルを考えたい！なんてケースがあるかもしれません。 この記事では、人を動かすためのキャッチコピーの作り方についてテクニックから本質までまとめました。 知っていて書くのと知らないで書くのとでは、お客様の反応がまったく違います。 コピーライターを目指している方はもちろん、そうではないけれどコピーを書く必要に迫られているという方も、いくつかのポイントをおさえることで格段にいいコピーを生み出せるようになりますよ。 1. コピーライティングにまつわる3つの誤解プロのコピーライターは、納得のいくコピーをひとつ完成させるために、何百本とコピーを書きます。 つまり、いいコピーとは、センスや思いつきだけで
themarsknowledge.com -
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
変化の時代の必須スキル 〜「5分で分かる学習好きの作り方」 ｜ doda X キャリアコンパス
doda X（旧：iX転職）は、パーソルキャリアが運営するハイクラス転職サービス。今すぐ転職しない方にも登録いただいています。 今の自分の市場価値を確かめてみましょう。 Googleの共同創業者であるラリー・ペイジ氏を始め、多くの識者が提示するように、テクノロジーの進化や新興国の台頭、世界的なエネルギーの不測やグローバル化の進展により、現在の職業の数十パーセントは20年以内に消滅し、多くのひとは80歳まで職業人生を歩み、その人生の中で3回ほど、まったく異なる専門性や領域で働く必要が出てくると言われています。 今回の記事では、この変化が激しい時代にあって、30歳、40歳、はたまた80歳になるまで、一生の間、変化を受け入れ、楽しむために重要な「学習」というテーマについて、約50名のビジネスパーソンと議論した内容、そこから得られた知見をとりまとめています。 先に結論を提示すると、下記の3点です：
企画書に使える！信頼できるデータの引用元15選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのなかみーです。 新人ディレクター向けシリーズの最終回ですね。 今回は、企画書を書くときに役立つ統計やアンケート結果などを公開しているサイトをご紹介したいと思います。 データで一番重要なのは、それが本当に“信頼できるものか”ということ。 発表元が信頼できる会社であればそのデータの信頼性は高いですし、100人に聞いたアンケート結果よりも10万人に聞いた方がより正しい統計データを得ることができますよね。 企画書に使えるような信頼できるサイトをまとめたので、お役立てください。 1. StatCounter http://gs.statcounter.com ブラウザのシェア率などを調べるときに使えます。 全世界だけでなく、日本国内で使われているブラウザにフィルタリングすることもできるのが便利です。 2. Similarweb http://www.similarweb.c
スマート家電が実現する素敵なディス☆トピア | fladdict
スマート家電とIoT（インターネット・オブ・シングス）について、仕事の相談がくるようになり色々と基礎リサーチをした。しかしながら家電メーカーが好き勝手にやるとディストピアが到来する・・・という脳内シミュレーション結果が出た。以下はストーリー仕立てでまとめたプレゼン資料。 こんな未来は嫌なので、是非ともこの危機を回避していただきたく。解決編はまた別の機会に書く（あるいはクライアントにだけ提案する）。 fladdictさんの新居事情 fladdictさん（仮）は、UIUX系の会社に勤務するギリギリ富裕層のデザイナー。念願のマンション購入にあたり、�家をまとめてスマート家電�化することにした。 意識高い系であるfladdictさんは、未来の生活を調査すべく自ら人柱となったのである！ 新居は、大手建設会社と大手家電メーカーが共同開発したスマートマンション「スマートピア南平台」。具体的に何がスマート
ランディングページの作り方。ネットで物を売りたい人は絶対に学んでおくべきこと。
ランディングページの作り方。ネットで物を売りたい人は絶対に学んでおくべきこと。 2015/6/30 SEO, マーケティング 前回記事の検索されるSEOキーワードの選び方。トレンドキーワードを知ろう。でキーワードを選定しました。今回はその続きです。SEOキーワードの検索からあなたのサイトに多くの人が訪れてくれるようになりました。サイトコンセプトの軸も決め、 いざサイトを見て欲しい、購入して欲しいと思ったところですが、 思うように成果が出ません。通販サイトを始めて、 そこそこアクセス数もあがってきているのに、 一向に物は売れない。それはなぜか？その理由はサイトの構成が、 ユーザのニーズにあったページになっていないからです。ではどうすればいいのでしょうか？それは、 ユーザーニーズに答えるランディングページの作成です。 ランディングページとはランディングページとは、インターネット広告や、検索エ
目を引くアイキャッチ画像の作り方、50の作成事例とデザインのアドバイス
あなたのブランドを魅力的に見せるアイキャッチ画像は、非常に大切です。どんなカラーパレットを使うか、どんなタイプのイメージを選ぶか、どんなフォントが一緒に機能するか、デザインのプロセスは多岐に渡ります。 Webページやブログのヘッダ、プロダクトの打ち出し、ブランドのメッセージなど、見た人の印象に残るアイキャッチ画像の作り方、50の作例とデザインする際に役立つアドバイスを紹介します。 Steal These 50 Branding Kits For Your Startup 下記は各ポイントを意訳したものです。 元記事ではアイキャッチ画像と同テイストの名刺も同時に紹介されています。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Whimsical: サンプル画像 抑えられたトーンとミニマルなタイポグラフィ 画像にソフトなカラーフィルタを使いトーンを抑え目にし、タイポグラフィ
UIデザインで大切な空白スペースの効果的な使い方
空白スペースは単なる美ではありません、ユーザインターフェイスの成功への鍵です。空白スペースがWebデザインやUXデザインにおいてどのように使うと効果的に機能するかを紹介します。 Why White Space Is Crucial To UX Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 はじめに -UXデザインにおける空白スペースの価値 1. 空白スペースでコンテンツを理解しやすくする 2. 空白スペースで関係を明確にする 3. 空白スペースで注意を引きつける はじめに -UXデザインにおける空白スペースの価値 メインとなるオブジェクトを強調し、ユーザーの注目を引きつけるネガティブスペース・空白スペースの重要性をすべてのビジュアルアーティストが理解しているでしょう。 ネガティブスペース（デザイナー的には空白スペース）
gdeg.jp - gdeg リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
OracleとGoogleの判決文を斜め読む - Qiita
(7/7追記)僕は斜め読みだったんですが、もっときちんと読んだ上で解釈を書いてくれている方がいます。僕も時間をとって全文を読みたいとは思っていますが、まだ時間がかかりますし、yudaiさんの会社の方が妥当性は高いと思いますので、そちらをご参照ください↓ 朝っぱらから色々衝撃が走った第一四半期の最終日ですが、OracleとGoogleの裁判について、どのあたりが問題だったとされるのか気になるので判決文等を読んでみました。 経緯 2010年8月、OracleはGoogleを訴える。当初の争点は特許侵害 (publicKey1) 2012年4月、サンフランシスコ連邦地裁の法廷開始 2012年5月、Googleの特許侵害はないとの陪審評決。ただし、フェアユースは意見が別れる。 2012年6月: Oracle対GoogleのJava/Android訴訟、損害賠償金ゼロで合意。今回議論された37件のJ
起業するのはカンタンだけど“会社っぽくする”ことが、難しい
僕が「起業で大事なこと」を挙げるとしたら、以下の3つです。 ・3人で起業すること ・代表は1人に絞ること ・「集まれる場所」を確保すること まず1つ目。なぜ「3人で起業すること」が大事なのかというと、1人だけでは会社がスケールしにくいからです。チームで起業をしないとなかなか会社を大きくすることはできないのではないかと思っています。 そもそも会社とは、人数を増やしていくことがとても難しいものです。1人からスタートすると、リソースが少ないため、事業を作りづらく、さらに創業者1人の期間が長い会社は、周囲から「入りづらい」と感じられてしまいます。 会社を成長させる、また、新しく入社する人が入りやすくするためにも「3人で起業する」ことをおすすめしています。 もちろん、「2人で起業する」のもいいですが、2人はチームとは言えないのです。音楽にたとえて言うと、B’zが「バンド」とは呼ばれないように、やはり
森岡書店 銀座店ができるまで 第1回：一冊の本を売る本屋（森岡督行／森岡書店店主） 「作った人と買う（読む）人が、売る場所でより近い距離感でいてほしい。」- DOTPLACE
買い物客でにぎわう銀座の中心街からちょっと離れた、ひときわ静かな場所に、去る2015年5月5日、新しい本屋さんが産声を上げました。その名は「森岡書店 銀座店」。その主は、東京・茅場町にある「森岡書店」のオーナー・森岡督行さんです。しかも、そのコンセプトは「一冊の本を売る本屋」。雑誌の本特集などでひっぱりだこの森岡さんが一風変わった新店をオープンすると聞きつけ、開店までの1カ月に密着しました。 今回は、銀座店のオープンが翌日に迫った森岡さんに伺った、開店のきっかけや新事業にかける思い、そしてドタバタ（？）の開店準備の様子をお届けします。 取材・文：榊原すずみ／撮影：後藤洋平（2015年5月4日、森岡書店にて） ――「森岡書店 銀座店」をまだ知らない人のために、どんなお店なのか教えていただけますか？ 森岡督行（以下、森岡）：茅場町は写真集や美術書をメインにした古書店という形ですが、銀座店は一冊
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GraphicBurger
【Photoshop入門】Webデザインをはじめよう！第1回 デザイン前に覚えておきたい環境設定とレイヤー機能 - Adobe Blog
All-animation by clovisdasilvaneto
デザイン組織に本気で取り組む
Web制作者はブックマークしておくと便利！HTMLやCSSやOGPやTwitterカードなどのコードを生成できるオンラインサービス
まとめよう、あつまろう - Togetter
くらしのきほん
DOTPLACE
