TL; DR どれだけ努力しても"ネイティブ並"は無理なので諦めが肝心 エンジニアは英語ができなくても話を聞いてもらえるので「伝える意思」と「分かったか分かってないかを絶対に曖昧にしない」こと 謝辞 このエントリは弊Android Projectのビルド待ち時間を使って書かれています。Android Studioさんに感謝します。 ビルド待ち時間にブログを書かれたくない場合は弊社は僕に全部盛りiMacを買ってください。 前口上 英語力に関するエントリは盛り上がりやすく荒れやすい気がするんだけど、それはやっぱりみんな英語は出来たほうがいいに決まってるしさりとて英語を身につけるのは難しいよねってことが分かってるからだと思う。 僕はエンジニアの中では比較的英語が得意な部類に入ると思うけど、それでも全然充分だとは思わない。ただ、これでやっていけないか？というと全然そんなことはないので、一番重要なの

前口上 アメリカで就職できなかった。華々しい成功譚は見かけるが、夢と散った話はあまり表に出てこない。 なんというか「三振したバッターが相手ピッチャーのことを語る」みたいでまるっきり時間の無駄かもしれないが、もしかしたら参考になる人もいるかも知れないし、実際に就職した人に「お前のアプローチはまったく的外れだ」と言われるかも知れない。僕も何が悪かったのか教えてもらいたい気持ちもあるし、迷ったがこのエントリを公開する。 ちなみにめっっっっちゃ長いので、要点だけ知りたい人は、アメリカで就職するにはとにかく 就労ビザ＞技術力＞学歴＞＞＞＞＞＞＞＞＞＞＞＞（越えられない壁）＞英語力 だというのだけお伝えできればと思う。 アメリカで働くために英語を頑張るぐらいなら、それより大学（院）に入り直してコンピュータサイエンスの学位をとり*1、同時に技術力を磨くほうがよほど近道だと感じた。 それから、現職の同僚は

余白を制する者はデザインを制する らしい。 いろいろとデザインの記事を読んでみても、やはり余白は大事と書かれています。 「余白 デザイン」でググってみても、記事がわんさか出てくるので、やはりデザインにおいて余白は大事みたいですね。 Webデザイナーとフロントエンドが歩み寄るためのPhotoshop豆知識 こちらはLIGの記事です。 これはデザイナー側が歩み寄ろうねという内容の話ですが、フロントエンド側も歩み寄ってもいいはずです。 最近はデザイナーがSketchでデザインし、フロントエンドがZeplinを見ながら実装するというのが主流になりつつあると思いますが、 それでも、デザインを学んできていないのにいきなり余白を気にしろと言われてもなかなか難しいですよね。 印刷物でしたら、デザイナーが作ったものがそのまま印刷されて配布されたり掲示されたりするので良いのですが、Webやアプリだとなかなかそ

最近、デザイナーに求められるスキルが多くて何を学べば良いかわからなくなってきた。と言う声を聞くようになってきた。 流行りの記事にいくつか目を通すと、デザイナーは「 経営者と対等に話せるコミュニケーション能力、ビジネスセンスを保有していて、イケてるグラフィックを作り、コードまでかけないといけない 」らしい。 スキルを多く保有している方が望ましいのは間違いない。 ただ、 現場デザイナー に最も大事なのは実装面での考慮事項が網羅されて考え込まれた「 決定力のあるデザイン 」を作る力だと思う。 サッカーで言うと、決定力は「 得点を決める能力 」として使われているけど、UIデザインにおいては「 実装面まで考慮された実装可能なデザインであるか 」という言葉として使っている。 魅せるデザインとフィージビリティが考慮されているデザインでは、かなり内容が異なってくるので、現場デザイナーとしては特にこのあたり

GoogleやIntelといった名だたる企業が導入し、書籍化もされたことで爆発的に広まった、「OKR」という目標管理のフレームワークを知っていますか？ 今回は、OKRって何？という初心者向けの解説から、その運用のコツ、企業における具体的な導入事例、さらにOKR向けのツールまでを、まとめてお届けします。 マネジメントや経営管理に課題をお持ちの方は、ぜひ、参考にしてみてはいかがでしょうか？ ＜目次＞ 【OKRとは？】OKRの仕組みや考え方を理解しよう 【OKRのメリットとは？】「MBO」との違いを知ろう 【OKRの運用事例】国内企業の事例を参考に、OKRの運用方法を知ろう 【OKR運用に役立つ海外ツール5選】効率的にOKRを管理しよう 【SELECKからの特典】「OKRパーフェクトガイドブック」 【OKRとは？】OKRの仕組みや考え方を理解しよう OKRとは、「Objectives and K

今回は見出し（h1〜h6タグ）のオシャレなデザインサンプルを68つ紹介します。CSSコードをコピペすればそのまま使うことができます。もちろん自分好みにカスタマイズして使って頂いても構いません。

cakesは2022年8月31日に終了いたしました。 10年間の長きにわたり、ご愛読ありがとうございました。 2022年9月1日

Source <h1 class="ml1"> <span class="text-wrapper"> <span class="line line1"></span> <span class="letters">THURSDAY</span> <span class="line line2"></span> </span> </h1>

『Soldi』は、複数の企業と提携し情報を提供しており、当サイトを経由して商品への申込みがあった場合には、各企業から報酬を受け取ることがあります。ただし当サイト内のランキングや商品の評価に関して、提携の有無や支払いの有無が影響を及ぼすことはございません。また当サイトで得た収益は、サイトを訪れる皆様により役立つコンテンツを提供するために、情報の品質向上・ランキング精度の向上等に還元しております。 名古屋の事業会社でデザイナーをやっているAkitaと申します。 プロのデザイナーとして、デザインで気にしているところは沢山ありますが、中でも一番こだわっているのは「フォント」です。 「フォントの選び方でデザイナーの実力が分かる」というのは、私が最初にデザインを教わった先輩の言葉でした。 世の中にはどんどんクオリティが高く、美しいフォントが登場しています。 広告・パッケージではやはり有償フォントが目立

CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、position: relative;とdisplay: inline-block;の指定は使用箇所によっては別の値に変更したり不要なら削除してください。 疑似要素とdata属性を使う このデモで表示されているようにテキストのカラーが中央を境に半々になっているのを疑似要素とdata属性を使って実装する方法です。 まずHTMLは下記のようなものを使用し、その際に中に記述する内容と同じテキストをdata属性（data-split）にも記述します。

2017年9月14日 CSS 要素を横並びにする時に便利なFlexbox（フレックスボックス）。みなさん、使いこなせていますか？今回はFlexboxを使ったちょっとした小技や、ハマりがちなポイントとその回避例を紹介します！ ↑私が10年以上利用している会計ソフト！ 画像とテキストを互い違いに表示 See the Pen Flexbox – row-reverse tip by Mana (@manabox) on CodePen. まずは画像とテキストが入るボックスを作成。それらを囲む .box という div を用意しました。 HTML <div class="box"> <img src="images/iphone1.jpg" alt=""> <div class="box-text"> <h2>見出しが入ります</h2> <p>テキストが入ります</p> </div> </div>

プロトタイピングというのは、アプリやwebの開発をする前に、その試作品（プロトタイプ）を作って、ユーザーへのインタビューに使ったり、開発メンバーの間でどのようなものを作るのかの共通認識を合わせたりするためのものです。 世の中にはたくさんのプロトタイピングツールが出回っています。 Framerは、その中でもコード(JavaScript)をベースにプロトタイプを作るツールで、他のツールと比べて群を抜いて完成度の高いアプリやwebのモックを作ることができます。 GoogleやFacebook, Uberといった名だたる企業がこのツールをプロダクト開発に取り入れています。 Uberの開発途中で実際に使われているFramerのプロトタイプ残念なことに、私の周りのデザイナーの多くがFramerに興味を持ってはくれたものの、Framerの闇に飲み込まれていってしまいました。「プログラミング言語に慣れてい

始めの一歩としての色共有 ひとりのデザイナーに頼らず、チームで運用できる体制を作るためにも デザインシステム は有用なツールです。しかし、様々な UI コンポーネントと決まりごとが揃ったものを作るのは骨が折れる作業です。デザイナー（もしくはエンジニア）が独自で作って「さぁ使いましょう」と公開しても、使ってもらえるとは限りません。また、デザインシステムをどこで共有して、どのように使われるのかも考慮しなければならず、他社の真似事では済まないこともあります。 作る前から課題が山積みでなかなか手が出せないかもしれませんが、何か始めなければゴールに辿り着くことはありません。そんな現場でデザインシステムを作る場合、色から始めることをオススメしています。 色なんて単純なところは出来ていると思う方は多いと思います。デザイナーであればパレットにしてまとめているでしょうし、エンジニアであれば色は変数にして整理

突然ですが、あなたは今、居酒屋にいるとします。 「15分前に注文した生ビールがまだ運ばれてこない状況」を想像してみてください。 あなたはどのような気持ちになりますか？ もう一度店員に声をかけようとするでしょうか。 それとも、諦めてお勘定を済ませようとするでしょうか。 いずれにしても、楽しくビールを呑むはずの時間を、不快感や残念な気持ちを抱きながら過ごすことになるでしょう。 お店側から「もう少々お待ちください」という一声があれば良いのに… そうは思いませんか？ 同じようなことが、アプリを利用している最中にも起こりうるのです。 1つのボタンを押しても反応がない時や、ページが推移した後に何も表示されない時、ユーザーはアプリから離脱しようと考えるでしょう。 この離脱を避けるためには、アプリがユーザーに対して「プロセスを実行している」ことを視覚的に伝えられなくてはなりません。 この記事では、その役割

はたらくみんなのための働き方改革。 もっと楽しくなるはずなのに、 楽しめないのはなぜだろう。 もっと歓迎したいのに、 盛り上がらないのはなぜだろう。 風が変わりはじめた今だから 少し考えてみませんか？

このルックスで走行音が静かだと逆にビックリしそう。 今流行の電気自動車に興味はあるけれど、市販されている電気自動車はハッチバックタイプやセダンタイプがほとんど。そんな状況に一石を投じる……つもりかどうかはわかりませんが、「エコな電気自動車でもワイルドにアウトドアを攻めたいんじゃい！」という冒険心あふれるドライバーに最適そうな、電動スポーツ・ユーティリティトラック『BOLLINGER B1』が登場しました。 オンロードでも、オフロードでも！ アメリカはニューヨークのBOLLINGER MOTORSが開発した『BOLLINGER B1』。フロント、リアともにデュアルモーター仕様の電気自動車で、全ての車輪を駆動させる「AWD駆動」での走行が可能です。それと同時に最高速およそ200km/h、0〜100km/hは約4.5秒という走行性能も達成しているんだとか。車両に搭載するバッテリー容量は60kWh

レスポンシブ対応のレイアウトはどのように拡大・縮小させるのか、また縦・横に積み重ねるのかに大別されます。 ブラウザいっぱいに表示する1カラム、サイドバーを備えた2カラム、2カラムを均等に分割したスプリットスクリーン、カードやパネルを使ったレイアウトなど、最近のレスポンシブ対応サイトで使われているレイアウトのアイデアと実装方法を紹介します。 ひと昔前まではJavaScriptを使用しないと実装できなかったレイアウトも、flexboxなどを使うことでスタイルシートのみで実装できるようになりました。 Split Screen Split Screenは、デスクトップでは左右に分割されたレイアウト、スマホでは上下に積み重なったレイアウトです。去年くらいから国内でもこのレイアウトは増えてきました。 Pure CSS Masonry Layout Masonryは、カードやパネルをレンガ状に敷き詰めて

Girl-Dad and Creative Director, Jaslin (Jay-S-lin). He was previously a CD for Apple. Jaslin is passionate about mentoring creatives and building digital tools that empower people. No. 558 Read Interview

High Resolution is a video podcast series with 25 masters of the design industry hosted by Bobby Ghoshal and Jared Erondu. Learn how the world's best companies approach, communicate and deploy design.