Please update your browser It seems you are using an old or unsupported browser. To continue enjoying Canva, please update to a recent version of one of the following browsers:
はてなブログの方に全てのセッションの聞き起こしを書いたので、そのまとめをこちらに載せます。いずれのセッションも、後ほどTwitterモーメントのリンクの追加や文章の修正などをする可能性があります。 1日目・「核拡デザイン」を探求し続けて / 中西 元男 ・トイレの美しさに向き合い続けて考えたこと / 大塚 航生 ・魅力を伝えるストーリーのつくりかた・つたえかた / きよえ氏 ・IoT時代における新しい音声体験のデザイン / 京谷 実穂 ・SENSORY EXPERIENCE DESIGN 感覚を鍛え、感性を磨く-デジタル時代の生涯教育 / 阿部 雅世 → 本人の意向により削除 ・クリエイティブを競争力に デザイナーを10倍輝かせる組織作り / 佐藤 洋介 ・ビッグデータから導き出されるビジュアルトレンド / 宮本 哲也 ・ビズリーチのデザイン哲学 / 株式会社ビズリーチ ・自動運転社会を見
HTML <header> <div id="nav-drawer"> <input id="nav-input" type="checkbox" class="nav-unshown"> <label id="nav-open" for="nav-input"><span></span></label> <label class="nav-unshown" id="nav-close" for="nav-input"></label> <div id="nav-content">ここに中身を入れる</div> </div> </header> inputやらlabelやらが入っていて、何のことが分かりづらいかと思うので、少し解説をします。 解説 全体はheaderで囲んでいます。他にもサイトタイトルやロゴ画像を入れるのではないかと思います。<div id="nav-drawer">の中に
パワーポイントデザインで失敗しないために、これだけはおさえておきたい「色の知識」では、簡単な色の知識や、配色するときのポイントなどについて説明させていただきました。この記事では、PowerPointで使う色を実際に選んでみたいと思います。前の記事を読んでいない方は、まずそちらをご覧いただいたほうが、より効果的にこの記事の内容を理解、実践できると思います。 ノンデザイナーの人たちが、いきなり色を選んで組み合わせまで考えるなんて、難しいのは当たり前ですよね。この記事を書いている僕も別にデザイナーじゃないので、色選びはあまり得意とは言えません。しかし、世の中にはたくさんの便利なWebサイトやツールであふれています。なので、まずは全面的にそれらに頼ってみましょう。
Any customer receives the whole package of design services. - Ads (both online and printed) - Website and all social media - Clothing (uniform, t-shirts etc.) - Office supplies and mugs - Business cards and letterheads - Banners and signboards - Favicon - Customized logo guidelines - Unlimited modifications - Lifetime support
[markdown] こんにちは、新人フロントエンドエンジニアの坂本です。 もうすぐ11月なんですね!早いですね!もう…入社から半年もたってしまいましたね.. 2回目の投稿となります今回は、最近気になってしょうがない「うにょうにょ動く円」を作って遊びたいと思います。 今回の投稿は、理想の「うにょうにょ動く円」をどうやったら作れるのかについて追究していく内容となっています。 ##うにょうにょ動く円とは イメージこんな感じですね。 このように円が何かしらの力によって揺らいだり、動いていたりする様を「うにょうにょ動く円」定義します。 きっとcanvasやSVG、webGLとかを使って再現するんだろうなと思います。 最近、写真がうにょうにょ動いていたり、ボタンがうにょうにょ動いていたりというのを見かけて、すごく気になっていました。 ##作り方 作り方はさっぱりなので、ググります。 今回、参考にさせ
ウェブサイト制作において、わずかなアニメーションを実装した「マイクロインタラクション」の重要性が高まってきています。メインとなるコンテンツの邪魔せずに、魅力的なデザインを追加できるだけでなく、ユーザーにも分かりやすく情報を伝え、特定の要素に注目を集めることもできます。 今回は、素敵なアニメーションを実装した、HTML/CSS/JSスニペットをまとめてご紹介します。どれもアイデア性にあふれるクリエイティブな動きが表現されています。今後のデザイン制作に活用してみてはいかがでしょう。 詳細は以下から。 アニメーションが気持ちいい!コピペで実装できる最新HTML/CSSスニペットまとめ ページの読み込みに多少時間がかかります、しばらくしてからスクロールするとよいでしょう。 Waves 3つのレイヤーを重ね、それぞれ@keyframesを指定することで、カラフルな波ウェーブ・エフェクトを実現していま
The best way to learn about design thinking is to do it, but we’d be remiss if we didn’t point out some of the books that help contextualize what we do. If you want to deepen your understanding of design thinking process and application, here’s a book list to get you started. We’re being selective, not exhaustive, here – think of it as the “staff favorites” section in your local bookstore. Innovat
ブループリントとはサービスを検証、実装、メンテナンスするのに十分なほど詳細にサービスそのものとサービスの相互作用に関わる特徴を記述したオペレーションツールです。 プロセスごとの機能から顧客に対して上下にラインを表示するようなグラフィカルな手法を使っています。これによって、すべてのタッチポイントとバックステージのプロセスを文書化し、ユーザーエクスペリエンスごとに整列されています。
CSSの進化により、様々な表現がCSSだけで完結できるようになったこの頃ですが、その中でもCSSを使ったアニメーションが色々と目を引くものがあり、今回はそれについて様々な場面で使えるCSSアニメーションをまとめてみました。ソースコードもあるので、カスタマイズすればすぐに使えますので、ぜひともチェックしてみてください。 関連:コピペで絶対使いたくなるCSSボタン 25選 目次 クネクネ動く CSS loading カラフルな CSS preloader! まるで折り紙のような Cube Fold ユーザーを引きつける Animated SVG Spinner バルスじゃないよ、パルスな Smooth Pulse スマホで見かけるあのメニュー Gooey Menu 一味違う確認モーダル Flipside 円形のプログレス SVG circular progress 流れる星 Parallax
LayoutIt! helps you make your frontend coding easier without needing to be an expert in JavaScript, HTML5 or CSS3 Bootstrap Builder Drag-and-drop the same Bootstrap components to your own design. Easy to integrate with any programming language, you just download the HTML and start coding the design into it. Grid Generator Start creating your own CSS Grid Layouts simply and easily with this magic t
If you're searching for the best Microsoft PowerPoint template, then look no further. This curated, ultimate guide has the best of the best featured by category, presentation use, and design style. Whether you need a simple PowerPoint theme (that you can customize quickly), or a great PPT slide deck design (with a ton of features), we have you covered. We also have thousands of professional PowerP
フラットデザインに最適なフラットアイコン素材がフリー(無料)でダウンロードできる「FLAT ICON DESIGN」。 WEBデザインやDTP他、PPTなどでもすぐに使える商用利用可能なアイコン素材。利用規約はこちら ファイルのフラットデザインアイコン ノートのアイコン素材 あざらしのフラットアイコン 博士のフラットアイコン素材 はさみのフラットデザインアイコン ハンマー(とんかち)のフラットアイコン ドル袋のフラットアイコン素材 無料の暴れ牛のフラットアイコン素材 スペースシャトルのフラットデザインアイコン ギリシャのパルテノン神殿風のフラットアイコン 目玉のアイコン素材 にわとりのフラットアイコン素材 計算機のフラットアイコン素材 その2 コーヒーカップのフラットアイコン素材 バッファローのフラットアイコン 乳牛のフラットアイコン 海外の大学帽子のフラットアイコン おさるさんのフラット
Webサイトをおしゃれに、かっこよく演出するアニメーション系JavaScriptライブラリー。デザイナーにも使いやすいライブラリーをまとめました。デモを見るだけでもアイデアがひらめくかも? Webデザインはこの10年間で大きく変わりました。2007年頃は雑誌のように静的なレイアウトが主流でしたが、2017年には数千のパーツが連動して伸縮しながら移動するデザインも可能になりました。 これから、優れたUIデザイナーになるにはWebアニメーション技術に関する知識も必要です。 この記事ではUIデザイン向けの良質なアニメーションライブラリーを9つ紹介します。現時点での最新の情報と、各ライブラリーの強みや弱み、向き不向きをまとめたので、タスクに適したライブラリーを選んでください。 「コーディングプロ級」の開発者ではなくコーディングもこなせるUIデザイナーの視点で各ライブラリーを評価しました。CSSだけ
使い方 HTMLとCSSの編集方法をご存知の方は読み飛ばしてくださいませ。 スキップ 手順1:CSSをコピペ のちほど紹介するボックスデザインのうち、気に入ったものがあればCSSをコピーします。これをブログやWebサイトのCSSファイルに貼り付けます。貼付け先はブログサービス別に以下のようになります。 link rel〜を貼る場所 WordPress[ダッシュボード][外観][テーマエディター]右側のバーの[style.css]※もちろんFTPソフトを使ってもOK はてなブログ[デザイン][][デザインCSS]スマホ用はの[フッタ]に<style></style>と入力、この中に貼付け アメブロ[マイページ][デザインの変更][CSSの編集] Livedoorブログ[ブログ設定][PC][カスタマイズ][CSS] FC2ブログ[設定][テンプレートの設定][スタイルシートの編集] Blog
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く