soran_chanのブックマーク - はてなブックマーク

デザイン力を上げるトレースのいろは

はじめに以前（2年半前、当時学生）、Webデザインの勉強中にトレースの記事を書いたことがありました。こんなサムネイルを見たことがある人が居るかもしれません..。（記事は昔のものなのでリンクは貼りません）なぜかこの記事が未だにじわ伸びし、noteで紹介されたりしており、「まずい..」と思ったため新たに記事を書くことにしました。ちなみにサーチコンソール見ても「Webデザイントレース」の検索が多く、勉強したいけどやり方がわからない人が多くいるんだなと再認識しました。学生の時の私もまさにそれで、デザイン系の学部に通っていたため「じゃあデザインできるんだね！」的な印象を持たれがちでした。でも大学ではWebやアプリのデザインの授業があるわけではないので、その辺は独学だったり、アルバイト先のデザイン事務所で教えてもらったりで勉強していました。トレースは実際に手を動かすので、ツールの勉強に

soran_chan 2018/08/16

リンク

【UI設計】優れたUIデザイン（ユーザインターフェース）を作るために意識すべき、たった1つの原則

Webサイトやアプリは、もはや現代人の生活に不可欠です。Webサイトやアプリにおける﹁UIデザイン﹂は極めて重要で、玉石混交の﹁UI原則﹂や﹁UIテクニック﹂が数多く公開されています。しかし、﹁UIデザイン﹂に関する膨大な情報を得ても、いざ自分のWebサイトやアプリ開発となると、﹁良いUIデザインは結局どうすれば作れるの？﹂と迷うことも多いのではないでしょうか。この記事では、優れた﹁UIデザイン﹂作成の実践に必要な、 UIデザインとは何か、なぜ重要なのかUIデザインで意識すべきたった1つの原則UIデザインを行うための具体的なアプローチと成功事例をまとめています。ポップインサイトでは、ユーザーリサーチのファクトにもとづいた情報設計、UIデザイン、WEBサイト改善を支援しています。WEBサイトのUX改善に課題がある方はお気軽にご相談ください。 UXデザイン/UXリサーチについて相談する＞

soran_chan 2018/07/17

UI

リンク

マークアップとは - Markupの意味と基本知識 | マイナビクリエイター

Web関連の求人情報を見ると、今や当たり前のようにマークアップエンジニアという職種を目にすると思います。その求人を見て、Web業界で働くことを希望している人の中には、﹁マークアップとは？﹂﹁コーダーやWebデザイナーとの違いは？﹂﹁エンジニアというくらいだから、システムやプログラミングに関する難しい専門知識を駆使する職業なのかもしれない﹂と考え、自分にはハードルが高くて無理だとあきらめてしまう人も多いかもしれません。マークアップエンジニアというのは、確かに専門知識を必要とする仕事ではあります。ただ、Web系の求人の中で、フロント寄りの領域を扱うことから、エンジニアやプログラミングとは大きく業務内容が異なります。マークアップエンジニアは、今日のWebサイト制作に欠かせない重要な部分を担っており、制作現場で数多く求められている職種です。そして、未経験者であっても、ある程度の勉強や実践経験を積

soran_chan 2018/04/19

メモメモ。

リンク

「ガンダムは何から観るべきか」問題の結論｜ぬのむ

ガンダムとは最も有名なロボットアニメであり、アニメ好き・アニメ周辺のオタクであれば見ていて当然、知ってて当然という暗黙の了解がある。この空気の中で話を合わせて﹁〇〇とは違うのだよ！〇〇とは！﹂と無理めなネタに愛想笑いしたり"シャア"を"シャー"と書かないようにしたりさぞ大変だったろう。。しかも、今からガンダムに入門しようと思ってもテレビアニメだけでも18本(しかもそれぞれ4クール=1年分ある)、これに映画やOVA、漫画や小説にゲームとめちゃめちゃな本数があり、何から入って何を観ればいいかわかるはずがない。詳しい人に聞いたところで答えもバラバラだ。﹁ガンダムは何から観るべきか﹂この問題に決着をつけよう。ゴールと前提条件の設定ガンダムで何を観るべきかについて語られたブログは検索すれば結構ヒットする。ただ、どれもその人が好きな良い作品をオススメしているものであり、ガンダムとは何かをわかってい

soran_chan 2018/03/23

面白い記事だった。作品数多いし、たしかに。。 ●ガンダム ●ネタ ●考え方

リンク

SVGの各アプリケーション書き出しをあれこれを調べてみた - デザイナーのイラストノート

このブログのロゴにも使用していますが、最近よく目にするようになったSVG。イラストにはうれしい画像形式なので、とても注目しています。しかし、制作するグラフィックツールによって書き出しの設定が本当にまちまち・・・ということでいろいろ試してみた結果です。 SVGとは Scala ble Vector Graphics︵スケーラブル・ベクター・グラフィックス︶で﹁SVG﹂。拡大縮小しても荒れない画像形式ということで、ロゴやアイコンなどに使用されるシーンも増えてきました。テキストエディタで編集できたり、CSSで色を変えたり、グラフィックツールがなくても画像を編集することができるのが特徴です。タイムリーにも、先日MicrosoftのOfficeでも、SVG形式が利用できるようになるというニュースもありました。 SVGの利点として、変更の差分が取りやすくGitなどで管理しやすい、ということがあります。例

soran_chan 2017/11/17

SVGについて

リンク

[CSS]Webページのこれからのレイアウトテクニック！FlexboxとCSS Gridは一緒に使用してこそ価値がある

Webページのレイアウト、一昔前まではfloat、最近のプロジェクトではFlexboxが主流だと思います。CSS Gridはどうでしょうか？ CSS Gridは主要なすべてのブラウザにサポートされ、採用を検討している、また既に導入している人も少なくないでしょう。注意しておきたいのが、CSS GridがあればFlexboxはいらないという考え方です。これからのレイアウトは、FlexboxとCSS Gridを一緒に使用することで、それらの性能を効果的に利用できます。 Flexbox and Grids, your layout’s best friends by Eva Ferreira 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 FlexboxとCSS Gridは一緒に使用することでパワーを発揮する神話は崩された Fri

soran_chan 2017/11/17

社内でも話題になってたので後で読む。

リンク

レスポンシブ対応、縦長ページで見かけるさまざまなUIコンポーネントを備えたHTML/CSSのテンプレート -Shards

最新のBootstrap 4をベースに、ランディングページやスマホアプリのプロモーションページなど、縦長ページでよく見かけるさまざまなUIコンポーネントを備えたHTML/CSSテンプレートで構成された無料のUIキットを紹介します。もちろんレスポンシブ対応で、非常に軽量に構築されているので、快適に利用できます。 Shards Shards -GitHub ShardsはMITライセンス、個人でも商用のプロジェクトでも無料で利用できます。 Shardsのデモ ShardsのUIコンポーネント Shardsの使い方 Shardsのデモダウンロードファイルには、すぐに利用できるデモページも含まれています。まずは、プロダクト・サービス向けの縦長ランディングページ。

soran_chan 2017/11/16

レスポンシブの勉強中なの(´；ω；｀)ﾌﾞﾜｯ　[レスポンシブ][UI][design]

リンク

これは嬉しい！IBMからコーポレートフォントが、商用無料のオープンソースフォントとしてリリース

IBMと聞くと、ThinkPadを思い浮かべる人も多いと思います。堅牢な作りは、使用していて安心感・信頼感があり、わたしも長年愛用していました。そんなIBMから、コーポレートフォントがオープンソースフォントとして公開されました。﹁IBM Plex﹂と名付けられたフォントは、カジュアルなHelveticaという位置づけで、さまざまなデザインに合うフォントです。安心・信頼に加え、洗練された美しさも備えています。 Win/Mac用、Webフォントがダウンロードでき、TrueType, OpenTypeも揃っています。 IBM Type IBM Type -GitHub ライセンスはSIL OPEN FONT LICENSEで、個人でも商用でも無料。Webデザイン、スマホアプリ、ゲーム、動画、紙デザイン、同人誌など、さまざまな媒体で利用できます。 IBM Plexにはサンセリフ、セリフ、モノ

soran_chan 2017/11/14

使いやすそうなのでメモメモ。[フォント][デザイン][フリーフォント][ダウンロード]

リンク

ピクセルとdpi、ppi、dppxと解像度の話

あけましておめでとうございます。弊社は1月5日より稼働しております。本年もよろしくお願いいたします。 2016年一発目の記事は、解像度の話です。ピクセルと解像度の話まずは基本的なところをお話しします。ピクセルとは？ピクセル︵pixel︶とは﹃PICture﹄と﹃ELEment﹄を組み合わせた造語です。︵﹃picture cell﹄の略とも︶ピクセルは画素と訳されます。単位として表すときは﹃px﹄と表記します。ピクセル、解像度、dpi 注意したい点として、ピクセルはそれだけで物理的な大きさを表す単位にはならないということが挙げられます。では、ピクセルの大きさは何で決まるかというと、解像度です。解像度は﹃ dpi ﹄(dots per inch)で表されます。これは1インチ︵＝2.54cm︶の中にどれだけのドットがあるかを示しています。ドットとは﹃点﹄のことです。これ

soran_chan 2017/10/24

めもめも

リンク

解像度(dpi)について解説、ピクセル・ミリ・センチ相互変換

﹁dots per inch／ドット・パー・インチ﹂の略で、﹁1インチ︵25.4ミリ︶あたりのドット数﹂を表す単位です。例えば72dpiは、1インチの中に72個の点があるということです。1インチ(25.4mm)を72で割ると0.35277・・・8ミリ。約0.35ミリです。1cmの画像は、約28ピクセルになります。※インチとミリの誤差があります。﹁pixel per inch／ピクセル・パー・インチ﹂の略で、﹁1インチあたりのピクセルの数﹂を表すピクセル密度の単位です。例えば326ppiは、1インチの中に326個の画素密度︵pixel density︶があるということです。 1cmあたりの画素数は、解像度200ppiの場合約79pixelなので 1cm×1cm＝1cm2の画素数は、6241画素になり解像度300ppiは、約118pixelになり 1cm×1cm＝1cm2の画素数は、13

soran_chan 2017/10/24

メモめも。もうさ、アプリ制作の話ししてるのに「cm」とか「mm」とかで話すのやめてくれよ。めんどくさいよ(´；ω；｀)ﾌﾞﾜｯ

リンク

大学研究室ホームページ作成・制作 webcil

ptとpxの換算ｐｔ（ポイント）とｐｘ（ピクセル）って、似ているようで違う、それとも実は同じかも？という疑問を抱いている方も多いと思います。今回のコラムはその謎に迫ります。１ｐｔは、１インチを７２分の１したサイズのことです。１ｐｘとは、１画素のことでサイズは解像度（ｐｐｉ：ピクセルパーインチ）によって異なります。一般的な話として、印刷の解像度の場合は、３００～３６０ｄｐｉ（印刷の場合はピクセルではなくドットパーインチで表現します）が普通で、ディスプレイモニタなどのスクリーン解像度の場合は、７２ｐｐｉが普通というのがあります。最近は１４４ｐｐｉだったり、２１６ｐｐｉという高精細なものもありますが、一般的に７２ｐｐｉなので１インチあたり７２ｐｘということになります。つまり、ｐｘもｐｔの１インチを７２分の１したサイズということで同じということになります。ところが、です。インターネ

soran_chan 2017/10/24

これ、すっごい悩んだので忘れないようにメモ

リンク

NIKKEI STYLEは次のステージに

キャリア、転職、人材育成のヒントを提供してきた「リスキリング」チャンネルは新生「NIKKEIリスキリング」としてスタート。ビジネスパーソンのためのファッション情報を集めた「Men’s Fashion」チャンネルは「THE NIKKEI MAGAZINE」デジタル版に進化しました。その他のチャンネルはお休みし、公開コンテンツのほとんどは「日経電子版」ならびに課題解決型サイト「日経BizGate」で引き続きご覧いただけます。

soran_chan 2017/06/15

あとで読む

リンク

最近のデザインで使われている、ロゴ・ブランディング・Webサイトのガイドラインのまとめ

Webサイトやスマホアプリのレイアウトの構成・展開、UIエレメントのバリエーション、カラーの使い方など、デザインの定義がまとめられたスタイルガイドを紹介します。ロゴやブランディングも引き出しを増やすためにも参考にしたいですね。

soran_chan 2017/04/25

あとで読んで見る

リンク

振り返りの手法紹介：KPT法 | ナカシマガジン

振り返りの手法といったら、まずはじめに出てくる？のがKPT法です。いろんな本やWebにも載っているので、聞いたことがある方も多いと思いますが、そんなKPTについてやり方をまとめてみました。ホワイトボードと付箋があれば出来ますので、時間作ってやってみると面白いと思います。 KPTって何？ KPTの始め方 KPTのポイント KPTって何？まず、KPTって何？ということから始めましょう。 KPTとは、Keep、Probl em、Tryの頭文字をとった造語のことです。プロジェクトの振り返りをするときによく使われる手法で、振り返りをする際の基本といって良い手法だと思います。 KPTはよくこんな図で書かれています。ホワイトボード等に付箋をはって、みんなで話をしながら実施します。単純な図ですが、その効果は予想以上のものがあります。 Keep‥続けること Probl em‥問題点 Try‥次にするこ

soran_chan 2017/04/13

忘れないようにメモ。これで今度反省会するぽい

リンク

2 つの Dropbox アカウントをリンクまたはリンク解除する方法

Dropbox Basic、Plus、Family、Professional、Essentials プランをご利用の場合は、そのアカウントを Dropbox Standard、Advanced、Business、Business Plus、Enterprise アカウントとリンクしたり、リンクの解除を行ったりすることができます。注： Dropbox Basic、Plus、Family、Professional、Essentials アカウント同士を互いにリンクすることはできません。 Dropbox Standard、Advanced、Business、Business Plus、Enterprise アカウント同士を互いにリンクすることはできません。管理者の方は、チームメンバーのリンク済みアカウントとデバイスを管理する方法をご覧ください。アカウントのリンクとは？ 2 つの Drop

soran_chan 2017/04/05

dropbox2アカについて

リンク

[Mac]Dropbox を複数アカウントで使用する方法｜Macアプリケーション｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

Dropbox アプリケーションは原則1アカウントしか利用（同期）することができませんが、 Mac の場合はAutomator でDropbox を起動することにより、2つ以上の複数アカウントを同期させることが可能です。新しいDropbox フォルダの用意 Mac の/Users/ユーザー名/フォルダに、新しいDropbox のフォルダを作成します。すでにDropbox アプリケーションを使っている場合は、Dropbox2、Dropbox-Bなど別の名称であれば何でも構いません。※今回は「Dropbox-s」にしています。 Automator の起動アプリケーションフォルダ内のAutomator を起動します。 Automator の「アプリケーション」を選択します。左メニュー（ライブラリ）の「ユーティリティ」から「シェルスクリプトの実行」を選択します。「シェルスクリプトの実行」

soran_chan 2017/04/05

複数使うことになりそうなのでメモ

クラウド

リンク

[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法

スマホは年々大型化し、スクリーンサイズは多様化しています。また、タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。 The 100% correct way to do CSS breakpoints 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ブレイクポイントで混乱する原因 Tips 1: ブレイクポイントを的確に取得する Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける Tips 3: ブレイクポイントを定義するコードブレ

soran_chan 2017/02/24

ブレイクポイントについて

リンク

現代の“呪い”を解くカズレーザーの言葉（てれびのスキマ） - エキスパート - Yahoo!ニュース

2016年、大ブレイクした芸人の筆頭といえばメイプル超合金のカズレーザーだろう。金髪に全身赤い服というひと目見ただけで覚えてしまう風貌だったり、バイセクシャルを公言していたりと、強烈なキャラが渋滞しているだけに、いわゆる“一発屋”枠のキャラ芸人だと思われがちだった。だが、﹃Qさま﹄などのクイズ番組で好成績を繰り返したり、共演者に﹁その落ち着きは何なの、2世タレント？﹂と驚かれるほどの物怖じのなさで様々なバラエティ番組で活躍、﹃お願いランキング﹄内の人気コーナー﹁カズレーザークリニック﹂でも“名言”を連発。溢れ出る知性で、一発屋的キャラのイメージを完全に払拭した。カズレーザーの肯定感に満ちた言葉がいま注目を浴びている。そんな彼の発言を振り返ってみたい。 ▼生き方15歳の頃から赤い服ばかり着る︵喪中や妹と会うとき以外︶ようになり、モンティ・パイソンに強く影響を受けたカズレーザーは、﹁とにか

soran_chan 2017/01/10

面白いよねこの人

リンク

大規模アンケート集計から見る日本のゲーマー像（その3）：コンシューマ，オンライン，スマホ，4Gamer読者が愛するゲームはこれだ

大規模アンケート集計から見る日本のゲーマー像︵その3︶‥コンシューマ，オンライン，スマホ，4Gamer読者が愛するゲームはこれだ編集部‥aueki 4Gamer.netの特大プレゼントで行われたアンケート集計結果を公開する企画の第3弾をお届けしよう。だんだんと核心に近づいていく感じだが，今回はゲームタイトル編だ。4Gamer読者はどんなゲームをプレイしているのか？　コンシューマゲーム，オンラインゲーム，スマホゲームのそれぞれで挙げていきたいと思う。なお，アンケート集計結果の概要や，ユーザーの基本特性，ハードウェア関連の特性については前回と前々回の記事を参照してほしい。大規模アンケート集計から見る日本のゲーマー像︵その1︶ユーザー属性編大規模アンケート集計から見る日本のゲーマー像︵その2︶ハード環境編最も人気のゲームタイトルは？ではさっそく人気のタイトルを見ていきたいのだが，

soran_chan 2016/12/26

へえー

リンク

水彩画、紙、布まで色々！高品質な無料テクスチャ素材65選

テクスチャ素材はデザイン活動で役立つ素材の一つで、デジカメで色々な素材を撮影したものやユニーク質感、模様をグラフィックソフトを使って表現したものがあり、WebデザインからDTPまであらゆる場面で使われています。そのまま背景に取り入れる以外に、既に出来上がっているデザインに重ねて使うこともでき、制作物をさらに魅力的に仕上げてくれるアイテムです。そこで今回は、持っておくと便利な無料テクスチャをまとめてご紹介します。どれも無料でダウンロードできますので、好みのもの見つけてくださいね。トレンドから定番まで！無料テクスチャ素材60選 1.12 Paper Textures http://graphicburger.com/12-paper-textures/ 12種類の様々な紙を収録したペーパーテクスチャのセットです。ちょっとだけ質感を加えたいときにぴったりです。 2.10 Light Tex

soran_chan 2016/12/07

探す手間が省けますな。[テクスチャ][素材][デザイン][フリー素材]

リンク

はてなブックマーク

タグ

soran_chanのブックマーク (300)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス