デザインの引き出しを増やしておこう！最近のWebサイトで見かけるデザインの新しいテクニックのまとめ
新しいデザインを見かけるとワクワクしますよね！ 2017年も半年が過ぎ、さまざまな新しいデザインを見かけるようになりました。最近のWebサイトで見かけるデザインのテクニックとその使い方を紹介します。 3 Essential Design Trends, July 2017 3 Essential Design Trends, June 2017 3 Essential Design Trends, May 2017 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダウンページ ナビゲーション ボックスをデザイン要素として使う 垂直のライン 小さいテキストの要素 幾何学的なレイヤー ぼかしを使った画像 スクリーンいっぱいのヒーローイメージは後退 斜めを使ったレイアウト 分かりやすいアクションボタン ダウンページ ナビゲーション ナ
flubber - 違いは細かいところに現れる。スムーズなアニメーションライブラリ MOONGIFT
HTML5の表現力が上がったことで、SVGなどを使ってプログラマブルなドローが実現できるようになってきました。パスを編集するだけで形を変更できるので、ある形から別な形に変更するのも難しくはありません。しかし、それが自然かどうかは別です。 もし自然なモーフィングを求めているならばflubberを使ってみましょう。 flubberの使い方 flubberの例です。変化が滑らかなのが分かります。 州の形に次々と変わる例。 州になった後、左右で四角い形になる例。 分裂と結合を繰り返す例。 flubberのアニメーションは非常に滑らかです。単にアニメーションするだけでなく、その差分を計算することによって、より自然な変化を実現できるようになっています。できていることは同じですが、こうしたUXにこだわったライブラリは今後増えていくのではないでしょうか。 flubberはJavaScript製のオープンソ
もっと早く知りたかった！SVGを扱うなら知っておきたいタグ＆プロパティまとめ
SVGが一般化してきたとはいえど、「SVGは聞いたことあるけれど、使ったことはない」というWebデザイナーの方も多いのではないでしょうか。 実際、長い間GIFやJPEG、PNGなどのビットマップ形式のデータが主流だったWeb業界ではあったので、SVGのようなベクター形式のデータが扱えるようになったとは言っても、「新しもの好き」の人が扱う目新しいフォーマットだと思っているひとが多いのも事実です。 しかし、SVGは画像劣化がなかったり、アニメーションを扱えたり、テキストエディターで直接カスタマイズができたり、CSSやJavaScriptで操作できたりと、扱うメリットが多いので、これから急速に普及していく可能性があります。 また、Can I use…でも確認できますが、今ではほとんどのモダンブラウザがSVGをサポートしているので、互換性も他の最新技術ほど気にする必要がないのです。 今回は、SVG
「スペース」+「何らかのキー」でアプリを起動させたり切り替えたり『SpaceLauncher』 | Macの手書き説明書
2017年7月5日 スペースを押しながら、何らかのキーを押下するとあらかじめ指定したおいたURLを開くランチャー。 file:///Applications/Safari.appという風にアプリがある場所を指定すればアプリケーションランチャー・スイッチャーとして使えますし、 file://{{HomeDirectory}}/Downloadsという風にフォルダを指定しておけばファイル・フォルダランチャとしても使えます。 via GIPHY 公式サイトの受け答えで Q.何でスペースバーなの？ A.でかいから と記載されていて笑うとともに妙に納得しました。 でかいキーだと使いやすいもんね。 スペースキーを押し続けるとヒントが表示されるので、スペース + ほにゃららのコンビネーションは丸覚えする必要はありません。 アクションはグループにまとめることもできるので、例えばフォルダに関するアクション
スペースキーをShiftキーとして使えるようになる『SandS』 | Macの手書き説明書
2017年7月5日 キーボードで普通にスペースを押した時にはスペースを入力し スペースキーを押したまま、何らかのキーを押した場合はShift + 何らかのキーと同じ入力をするようにしてくれるメニューバー常駐アプリ。 Shiftキーをスペースキーで代用できるようになるので、小指を使う頻度が非常に少なくなり、タイピングがとても楽になります。 SKKというShiftキーを多用する文字入力方法では必須と言っても良いSands(Space and Shift)をこの世で一番簡単に導入できる方法と言っても過言ではないでしょう。 なぜなら、設定とかメニューとか、その他諸々がないアプリだから。 使うには起動しておくだけ。 シンプル。
互換性抜群！「Web Animations API」の基本をおさらいしよう
ホームページ上で何らかのアニメーションを実行しようとするときには、どのような技術を使ってアニメーションを作ればいいのか悩みます。 というのも、アニメーションを実装するのに、CSSアニメーションやCSSトランジション、HTML5のCanvas、SVGアニメーション、GIFアニメーション、JavaScriptでDOM操作をすることで実装するアニメーションなど、さまざまなものがあります。 しかしながら、決定版とも言える新しいアニメーションフレームワークとなるJavaScriptのAPIの策定が、W3Cで進んでいます。 それが、今回ご紹介する*「Web Animations API」*です。 通常、スクリプトを使ってアニメーションを実装する際には、いざ作ろうとしてみると、サポートブラウザの問題やデバイス間での見え方の違いなどで、考慮すべき点がいろいろ多いのが現実です。 しかし、このWeb Anim
生物と非生物の境界、ウイルスとは何か/中屋敷均 - SYNODOS
世に多くある「境界」の中でも、人にとって最も冒しがたく明確な境界というのは、「生」と「死」の境界であろう。「生きている」ことと「死んでいる」こと、あるいは「生物」と「無生物」。その間には相互の往来が不能な絶対的な境界があると、思われがちである。しかし、結論から言えば「生物」と「無生物」の境界は、一般に思われているよりはるかに曖昧なものだ。その曖昧さを生み出している存在の一つが、本稿の主役、ウイルスである。 昨年『ウイルスは生きている』（講談社現代新書）というタイトルの本を上梓させて頂いたが、このタイトルに対する反応には、正反対の二つのものがあった。一つは「ウイルスが生きてるって、当たり前じゃないの？」というものであり、もう一つは「こりゃまた、ずいぶんと挑戦的なタイトルですね」というものである。典型的には、前者は一般の読者から、後者は生物学に知識がある人からの反応である。 「ウイルスが生きて
MarkdownノートアプリInkdropで家賃の半分が賄えるようになりました
4月にInkdropの総売上が10万円を超えた報告をしてから、久々の売上報告です。Inkdropはクローズドソースですが、プロジェクトで得た知見は惜しみなくオープンにしていくつもりです。どんどんやり方パクってください。もし質問などあればコメント欄やTwitterにて受け付けます。 TL;DR驚きの解約率の低さ注文の多い少数派を相手にしすぎないブログを始めたら日本のユーザが増えた1000人のユーザが１人を食わせるモデルを確立したいInkdropはMarkdown好きのためのノートアプリ既にInkdropについてご存知の方は読み飛ばして下さい。 Inkdropはマルチプラットフォームで動作するノートアプリです。今のところmacOS、Windows、Ubuntu、iPhone、Androidに対応しています。 日々の作業記録や議事録、コードスニペットからブログの下書きまで、技術的な事柄を構文ハイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スクロールインした際のアニメーションを簡単実装「AOS」:phpspot開発日誌
男性の3人に1人がプログラミング経験あり、使用経験は「C言語」がトップ、50代では「BASIC」 
