@mixin text-crop($line-height: 1.3, $top-adjustment: 0px, $bottom-adjustment: 0px) { // Configured in Step 1 $top-crop: 9; $bottom-crop: 8; $crop-font-size: 36; $crop-line-height: 1.2; // Apply values to calculate em-based margins that work with any font size $dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font-size; $dynamic-bottom-crop:

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 「AndroidはiOSと同じデザインで！」と言われてどう実装しようか悩んでる方向けの記事です。 Androidアプリを作るなら当然マテリアルデザインガイドラインに合わせて1から画面設計するのが最高なんですが、そうはいかないことが経験上多いので対応案をざっくりまとめました。 諸注意 これは「iOSとAndroidのUI対応一覧」ではありません。 iOSとAndroidで同じような見た目のUI部品でも作られた経緯や目的は違うので、比較して置き換えるようなことは基本的にできないと思います。 とはいえなんの指標もないと辛いの

bonfire frontendで発表した今後のフロントエンドの話です。

2025.01.27 追記 この記事は、モードレスデザインについて書かれたブログ『Modeless and Modal』と、私の出会いについて書いたものだが、なんと今年『Modeless and Modal』の著者による、モードレスデザインについての本が出版されることとなった。 というわけで、この記事読むよりも本読んだ方がいいと思う。 *** はじめて iMacG3 を使った時、私はとても前向きな気持ちになった。説明書を読まなくても何をどうすればいいの分かったし、自分の思い描いた通りに動かすことができた。 道具は使う人の能力を拡張させると言うけれど、私はあの丸いマウスと一緒に、文章を書いたり、絵を描いたり、本当に何でも出来る気がしたのだ。 それは Mac だけではなかった。iPhone も、iPadも、Apple 製品はいつも私を高揚させた。なぜ私はこんなにも惹かれるのか。不思議に思いなが

Windowsユーザーの方に朗報です！ Windows 7, 8, 10で、Sketchのファイルを開くことができ、編集も保存もでき、CSSの書き出し、SVGやPNGのエクスポートもできてしまう無料アプリが登場しました。 もちろん、日本語のWindows環境でも利用できます。 Lunacy, Sketch for Windows 前回紹介した時はファイルを開くだけの機能でしたが、ついに編集・保存にも対応し、Sketchの機能の80%を備えました！ Windows版のSketchといっても過言ではないでしょう。 Lunacyの特徴 Lunacyのダウンロード・インストール Lunacyの使い方 Lunacyの特徴 Lunacyは、.sketchファイルを開き、編集し、保存することができるWindowsのネイティブアプリです。しかも、完全無料で利用できます。 Lunacyの画面 Sketch（

こんにちは、ウタです。 突然ですが、画像のサイズって気にしたことありますか？ サイズと言っても画像の容量の話では無く、縦横比の話です。 特に気にせずなんとなくで画像を貼り付けたり、加工している人も多いと思います。 しかし、画像のサイズにも"人が何となく美しく感じる"という比率があります。有名なのでは黄金比とか。 今回はそんな様々な比を紹介して、ブログに最適な画像のサイズを考えていきたいと思います！ 様々な比 黄金比 白銀比 青銅比、白金比 じゃあ、有名なサイトの画像の比ってどうなってるの？ You Tube はてな 写真 まとめ 様々な比 有名な比、美しいと言われる比にはそれぞれ名前がついています。有名なのは黄金比ですね。黄金比のように美しい比率には、それぞれの比が貴金属になぞられて名前がつけられています。 そんな貴金属比を紹介してい行きます！ 各比率に応じて画像がついているので、なんとな

Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1

2018-01-31自分たちにも優しい”デザインとは？こんにちは。最近白髪が目立つようになりました。最初は蛍光灯の反射かな？とおもっていましたが実はそうじゃないらしいイケメン担当デザイナーの小山です。 私が担当しているジョブメドレーではサービスの改善をいくつも重ねますがその結果、全体の統一感が薄くなりデザインの改善をすることがあります。 こういった場合、もちろんユーザーの使いやすさを前提にリニューアルを考えますが、自分たち（開発者）にも使いやすいデザインはどういう姿か追いながら取り組むように心がけるようにしてみることにしました。 この試みの背景にはサービスのプロダクト基本理念が関係しています。このエントリでは、先般行ったモバイル向けの求職者画面のデザインリニューアルを通して、プロダクト基本理念に基づいた「自分たちにも使いやすいデザイン」を実現した話をご紹介いたします。 開発工数を増大させる

スポニチ芸能 @sponichigeinou ジャニーズ事務所から会見などでの写真のWEB使用を解禁すると発表がありました！ 今後、スポニチ芸能をご覧の皆様に取材現場の様子をお伝えすることができるようになります！！！ 第１弾は映画「羊の木」の会見に登壇した関ジャニ∞の錦戸亮さん。流ちょうな英語を披露されました！ pic.twitter.com/B3hGcd7PW7 2018-01-31 22:27:07

元記事の著者より：この記事は主に北米文化で私が見たことを反映しています。 誰かに職業をきかれたら、私は「フロントエンド開発者です」と答えます（答えは相手によって変わることもあります）。10年か20年前は、自分の仕事に必然的に伴うものが何なのかは、かなり明瞭でした。インタラクション用にHTMLやCSSを書き、JavaScriptも多少は書いていました。駆け出しの頃、PHPやMySQLの作業に職務の大半を費やしていたとはいえ、フロントエンド開発者として見られる方が好きです（これに関しては、後に詳しく説明します）。この状況は、2010年の初頭に変わり始めました。JavaScriptが、重要で、非常に大きな存在になってきたのです。昨年の初め頃から、たくさんのフロントエンド開発者に会うようになり、あることに気付きました。フロントエンド開発者は、もはや、私が以前から知っているフロントエンド開発者ではな

10 New Principles Of Good Design 良いデザインというと、ジョナサン・アイブにも影響を与えたといわれるディーター・ラムスが定義した10の原則がよく知られている。 Co.Design の編集者の Suzanne LaBarre が、これを2018年の現在に合わせてアップデートする試みを行っている。彼が考える、良いデザインの10の原則はどんなものか。 良いデザインは透過的である：ブラックボックスでなく、ユーザが決定を下す助けとなるべき 良いデザインは広範な影響を考慮する：デザインはクリック数よりも重要で長期的な影響があるのを配慮すべき 良いデザインは時間がかかる：この20年間支配的だった「迅速な行動が物事を動かす」という考え方は、ソフトウェアが支配する現在は通用しない 良いデザインは正直だ：ディーター・ラムスの10の原則にもこれはあるが、Uber のような利用者と

ディープラーニングで新しい画像変換 数ヶ月前ですがディープラーニングの分野で「pix2pix」という技術が話題になりました。これは簡単に言うと画像フィルタを入力画像と出力画像のペア（教師データ）だけから自動で生成してくれる技術です。詳細は、以下の記事や元の論文を参照下さい。 pix2pixの紹介 | 株式会社クロスコンパス's Blog GAN（と強化学習との関係） 「pix2pix」を使うと、従来の画像処理では難しかった、白黒画像をカラーにしたり、手書きの絵を写真にしたりといった、ぶっ飛んだ画像フィルタを教師データを用意するだけで生成できてしまいます。具体的な応用例に関しては、以下の記事などが参考になります。 できそうなことはだいたいできる画像生成AI、pix2pixの汎用性に驚く - WirelessWire News（ワイヤレスワイヤーニュース） 自分も何か面白い画像変換フィルタ作っ

つくったもの 原稿の締切と進捗を管理するシステムです。 これが画面の全体像のキャプチャです。モザイクが多くてよくわからないので、ちょっと説明を加えたのが下の画像です。 上のほうに、その日と翌日の掲載予定記事が出ます。その下にカードのような感じで表示されているのが、各原稿の締切／進捗管理です。 カードは締め切り日順に表示されていて、各カードの内容はこんな感じになっています。締め切りを本人に伝えたかどうかとか、ネタのメモを書き込むことができます。ステータスは未入稿・チェック中・リライト中・入稿済みの4種類があり、手で更新します。 この日は三土さんの締切で、まだ原稿が入稿されていないことがわかりますね。（三土さん晒してすいません。この記事は無事掲載されました） 締切1週間前とか、超過とか、状況によってカード自体の色も変わって気づきやすくなっています。 背景 僕はデイリーポータルZ(以下、DPZ)

個人でも商用でも無料利用できる、日本語のフリーフォント332種類を紹介します（公開時より、3+18個増えました）。 ビジネスからプライベートまで、幅広く利用できる無料フォントが満載です！ 去年は260種類だったので、今年は大幅に増えています。 中には、配布先が変更されたフォント、配布終了になってしまったフォント、無料でなくなったフォント、ライセンスが変更されたフォントもいくつかあります。 最新版を公開！フォントの数が大幅に増えています。 2020年用、日本語のフリーフォント 417種類のまとめ 初紹介のフォントから既存フォントも改めてリンク・ライセンスを確認しています（※情報はこの記事の執筆時のもの）。ライセンスはWebデザインだけでなく、同人誌や印刷物などでの利用も確認しました。

昨年、大垣で開かれたミニメイカーフェアでダンボールでアイアンマンやマスクを作っている人がとなりになった。 いわいともひささんだ。 それからFacebookでつながっていたのだが、最新の作品がすごかった。バーチャファイターのアキラだったのだ。 これはやっぱり一度きちんと話を聞くべきではないか。