あらゆる業種で使える！無料アイコン、ピクトグラム55個まとめ 2017年9月度
コンテンツを視覚化することでより分かりやすく、伝えやすくできるアイコン素材。しかし、用途に応じて目的のアイコンデザインを作成するには、どうしても時間と労力がかかってしまいます。 そんなときは、あらかじめデザインされたアイコン素材集を利用してみましょう。今回は、無料ダウンロードできる高品質な新作アイコン素材をまとめてご紹介します。 ビジネスのプレゼン資料や企画書作成など仕事にも使えるアイテムが多数揃っており、Photoshop や Illustrator、Sketchなどさまざまなプログラムにも対応しています。 PhotoshopやIllustratorで編集しやすい、無料アイコン素材40個まとめ 2017年5月度 あらゆる業種で使える！無料アイコン、ピクトグラム55個まとめ 2017年9月度 100 Basic Icons ウェブサイトで利用するであろう100種類の基本アイコンが揃ったアイ
まずコードの可読性を最適化しよう | POSTD
最近では 最適化 という言葉を使う場合、GPUメモリ消費やネットワークトラフィックの最適化、などと明示的に言わない限りは、 実行時間の最適化 という意味で使われるケースがほとんどです。 自分が何を最適化しようとしているかを知ろう 私がプログラムを始めた頃、プロセッサの処理能力は遅く、メモリサイズもとても限られていて、キロバイト単位で計算されていました。ですからメモリ容量をよく考え、メモリ消費を上手に最適化しなくてはなりませんでした。大学では最適化について2つの極論を教わりました。 メモリを犠牲にして実行スピードを最適化する。 または何度も計算を繰り返して、メモリ消費を最適化する。 最近では誰もメモリについては大して気にしていません（デモシーン製作者、組み込みシステムのエンジニア、一部の携帯電話ゲームのディベロッパなどは別です）。RAMだけでなく、ハードディスクの容量についても同様です。 W
[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説
HTMLとCSSでグリッド システムを実装する際、何から始めればいいのか、どういうことを考え、決めて、どんな手順で進めるのか。 カラムの幅のつくり方、溝はmarginとpaddingのどちらがよいか、レスポンシブはどう対応するのかなど、グリッド システムを実装するテクニックを詳しく解説します。 かなり長いので、時間のある時に読んでいただければと思います。 How to build a responsive grid system 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 グリッドの実装に必要な準備 グリッド システムの構築 Step 1: グリッドを作成するための仕様を選択 Step 2: border-boxにbox-sizingを指定 Step 3: グリッドのコンテナを作成 Step 4: カラムの幅を計算 Step
![[CSS]レスポンシブ対応のグリッド システムを実装する時に絶対覚えておきたいテクニックを詳しく解説](https://cdn-ak-scissors.b.st-hatena.com/image/square/973ddf236729b95ec2af2884162bebe179d65cb5/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201604%2F2016111201.png)
「UX」という言葉が聞こえないクックパッドのサービスデザインとは？
インタビューUX MILK編集部、編集スタッフの藤井です。 UXデザインの現場に突撃取材するUX MILKのインタビューコーナー、今回は株式会社クックパッドの倉光さんにお話を聞いてきました！ クックパッドではどんなUXデザインを実践しているのかお伺いしたところ、そもそもクックパッドのサービス開発現場では「UX」という用語はあまり聞こえてこないとのこと…！ その理由とは…!? 学生の方にもわかりやすくお仕事内容を説明いただいたので、ぜひ初心者の方にも読んでいただきたい内容となっています。それでは、早速インタビューをどうぞ。 倉光 美和（くらみつ みわ） 福岡県生まれ・デザイナー。家庭用ゲーム業界でゲームのUIデザインを経て、2015年にクックパッドへ入社。現在は主に iOS/Android アプリの開発・改善を手がけるほか、グループ会社のサービスデザイン組織のサポートなども。人間中心設計推進
デザインセンス皆無の僕がブログのオリジナルヘッダー画像を作りかた教えます - にーとのかがみ。
※デザイナーの方はおそまつな記事ゆえスルー推奨ですｗ 相変わらずはてなの月初は運営報告記事が縦横無尽に駆け回ってますね、記事を見てて勢いついてる人が多くて羨ましい限り。 でもこのブログはマイペースに更新していくよ。 どうも、ケンヂです。 僕がいう必要もないと思うけど、気付いた？いや、お目が高い！（ｳｽﾞｳｽﾞ） そう、ブログのヘッダー画像が変わりました！シンプルでちょっとオシャンティな感じになってない？ このブログを始めて見た人の為に説明すると 【Before】 【After】 って感じになりました！ ぶっちゃけ前のデザインも気に入っていたんですけど、僕の気分にはかないませんでした。 ちなみに前のヘッダー画像はブログ仲間のキヨスイさんところのデザイナーさんに描いてもらいました。多分ココナラで依頼を受けていると思います。 www.tairakenji.com そしてこんなことをいうのも何です
ノンデザイナー必見！ 絶対に見ておきたいデザインスキルアップできる記事12選 - ICS MEDIA
弊社のスタッフはフロントエンドの開発にとどまらず、デザインを制作する機会も少なくありません。弊社に限らず、近年職種を問わずデザインを扱う機会が増えているように思います。しかし、コンテンツ要素が整理整列されていなかったりテキストのカーニングがされていなかったりと、基礎的なことができていないようなケースも多く見られます。基礎的な部分が押さえられていないと、野暮ったさや素人感が出てしまいイマイチな仕上がりになってしまいます。 今回はそういった方に是非読んでもらいたい記事を、すぐにでも実践できる内容を中心にピックアップしました。Webサイトやアプリケーションのデザインだけでなく、企画書やプレゼンテーション資料の作成などでも応用できるものなので、どなたでも覚えておいて損はないと思います。 フォント選び フォントの基本的な選び方 | Arch ▲フォントの系統から書体、ウェイトの選定方法まで、ユーザー
サイトのパフォーマンス改善で重要なクリティカル レンダリング パスについて | コリス
ブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。ブラウザがページの最初のペイントを実行するために必要とするこのシーケンスは「クリティカル レンダリング パス(Critical Rendering Path)」と呼ばれます。 クリティカル レンダリング パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。 Understanding the Critical Rendering Path 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 クリティカル レンダリング パス(Critical Rendering Path)には、6つの段階があります。 クリティカル レンダリング パスの6つの段階 01. DOMツリーの構築
Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説
玉石混合状態にあったFluxのフレームワークも、ここ最近ではReduxが首一つ抜け出したような感じとなっています。自分はFacebook/Flux派ではありましたが、先月発売された『WEB+DB PRESS vol.92』に掲載されていた伊藤直也さんのReduxの記事を読んで、Reduxを覚えてみようという気になりました。Redux自体はとてもシンプルで、とっつきやすいと思いました。ただReactとの連携はFacebook/Fluxと比べるとややこしい部分が多いかなといった印象です。ちょっとしたサンプルを作ってみたので、Reduxの実装方法とReactとの連携について紹介したいと思います。 ReduxとはReduxは、Facebookの提唱するFluxアーキテクチャに基づいて（影響を受けて）設計されたJavaScriptフレームワークです。作者は@dan_abramov氏。 reactjs
脱「JavaScript疲れ」のために注目すべき、3つの最新ライブラリー
ツールやライブラリーが乱立し、年々複雑化するJavaScriptの世界。それでも2017年に注目したい3つのライブラリーを紹介します。 JavaScript界にとってはクレイジーな年だった、2016年が終わりました（編注：本記事の原文は2017年1月2日に公開された）。この1年で数え切れないほどの印象的なライブラリーやフレームワークが登場しました。「You Might Not Need JavaScript」はJavaScriptを使わなくても実現できるコードを紹介してJavaScriptの使い方について疑問を投げかけ、Nolan LawsonがFronteersで発表したスライドに関するツイートが議論を呼び、Jeremy KeithやChristian Heilmannといった著名人からもレスポンスがありました。この様子はNolanの投稿にまとめられています。最初にクレイジーと書きました
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
この記事のオリジナルは voxxed に投稿されたものです。 JavaScript関連の問題を抱えるチームをサポートする仕事を通じて、いくつか共通の問題点があることに気づきました。もしあなたもJavaScriptに対するイライラを感じているのであれば、この記事は何らかの助けになるかもしれません。おことわり：私がお教えするヒントはすでにご存知のものもあるとは思いますが、うまくいけば、多少なりとも有用な情報があるかもしれません。特にエンタープライズアプリケーションやCMSソリューションを構築する際に有効なヒントです。チームの誰もが話したがらないCMSのコードについてお話しします。いずれも必要に応じて採用できるものです。 debuggerステートメント 大半のブラウザでサポートされているにもかかわらず、JavaScriptを書く際に最も活用しきれていない機能の1つです。debuggerステートメ
良い UI をつくる - おいちゃんと呼ばれています
師走に入った。来年良いスタートを切るために一年を振り返るには良い時期だ。 さて、2015年の後半くらいから、フロントエンド・エンジニアとして「良い UI をつくる」ことに自分のリソースを集中させてきた。UI はここではウェブアプリケーションの UI を指す。 一年半をそれに費やしてきて、このあたりで、自分が考える、良い UI（ユーザーインターフェイス）とは何か、どうすればそれを実現できるのかを整理しておくのも悪くないなと思ったので書き留めておく。 良い UI をつくるには 良い UI をつくるには次の 2つが必要だと考える。 1 良い UI を定義できること 2 上記 1 を実装（実現）できること そう、いまから何をしようとしているのかというと、良い UI をつくるために必要な要素をツリー構造で整理しようとしているのだ。 ただし、以下に良い UI をつくるために必要な要素を分類しようと試み
デザイン採用担当はポートフォリオで何を見ているか、何が見えているか？ - astamuse Lab
初めまして、こんにちは。白木と申します。デザイナーです。 前回、「広告費用を自動取得し100時間分の作業をなくす話 - astamuse Lab」を投稿した後、「白木さんはデザイナーですか？」という趣旨のツッコミを複数からいただきました。その節は大変ありがとうございました。 lab.astamuse.co.jp 私としてはデザイナーが問題解決手段の一つとしてコードを使えることは自然だと考えいます。しかしながら、のっけからその話題だったというのはミスリードでしたね。バランスを取り直すために今日はデザインの話をします。 お題は「デザイン採用担当はポートフォリオで何を見ているか、何が見えているか？」です。 本投稿の目的・狙い いざポートフォリオを作るとなると悩む方も多数いらっしゃると思います。「どうやって作ればいいのだろう？」「何に気を付ければいいのだろう？」。そういった皆さんの参考になれば幸い
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
2017年に「これは流行る！」な6つのWebデザインスタイルを予想
2016年を通じてWebデザイナーがシンプルさやミニマリズムの方向から離れるにつれ、数多くの新しいスタイルや流行を見てきました。私達はより視覚的に理解しやすく、インパクトのあるデザインの流行に戻り始めているように思います。FramerやOrigamiなどの新しい技術やソフトウェアがWebデザイン世界の可能性を広げ続けています。 ここで2017年の進化し続けることが確実な6つのWebデザインスタイルをご紹介したいと思います。 1. 繊細なマイクロインタラクション Buck.tv http://buck.tv/ マイクロインタラクション（細部の相互アクション性）は、プロトタイプおよび実行のためのツールとともに最近Webで人気を集め始めていて、この傾向は続きそうです。Buck.tv はマイクロインタラクションが効果的に実施されているいい例です。ホバーエフェクトが高度にスタイリッシュで、美しく、
フロントエンドエンジニアが絶対読んでおきたいJavaScript最新記事ベスト10
変化の早いフロントエンド界隈でいま押さえておきたい、最新のJavaScript関連記事をKADOKAWAが運営するオンラインメディア「WPJ」からアクセス人気順に紹介します。
GPUアクセラレーションとposition: relativeによるレイヤー生成について
またアニメーション... ボタンなどのUIにGPUアクセラレーションが効いたアニメーションをつけたとき、iOSにおいてはiPhone4か4SのWebViewあたり、Androidにおいては….まぁ機種依存的(げんなり)に、アニメーションの立ち上がりが遅いことがあります。 その辺を調査していたところ、position: relativeの指定による、意図しないレイヤー生成＆GPUアクセラレーション巻き込みによって、何かしら合成レイヤー周りでオーバーヘッドが発生してしまっているんではないかな、という憶測に行き着いた次第。今回はその辺りを見ていきます。 GPUアクセラレーションが効いたアニメーションは、CSS Animations、CSS Transitionsのほか、特殊なプロパティ（transform3d: scale(1,1)とか）で強制的にGPUアクセラレーションを効かせたCanvasア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
未来のデザイナーは「コード」を学べと、ジョン・マエダは言う
ログイン - はてな
JavaScript DOM APIの基本を学ぶ 【構造編】