2021年5月に読んだWeb・デザイン関連の本2021年6月1日 書評 Web制作やデザインに関する情報は、インターネット上以外にも書籍を通して体系的に学ぶことができます。今月も様々な本を拝読しました。その中でいいなと思った物、オススメの物をいくつか紹介します！ ↑私が10年以上利用している会計ソフト！ 初心者からちゃんとしたプロになる Illustrator基礎入門
フリーランスWebデザイナーが初案件を獲得する方法
2021年5月27日 Webサイト制作, フリーランス フリーランスWebデザイナーを目指して日々勉強をしているみなさん、そろそろ実案件を受けようと準備を進めているみなさん、いかがお過ごしでしょうか？スキルの向上は実践あるのみ…と言われますが、最初のうちはその実践を積む機会がなかなか持てませんよね。今回はそんな新人のみなさんが最初に案件を取るまでのお話を書いてみます。 ↑私が10年以上利用している会計ソフト！ 新人フリーランスWebデザイナーは仕事を受けにくい？ 答えはYES。新人を雇わない理由はたくさんあります。まずは品質への不安。クライアントの立場で考えてみると、やはりクオリティの低いサービスは受けたくありません。そして指定した時間通りに納品してくれるかも不安です。つまり信頼がないわけですね。 一度も案件をこなしたことのない新人にはレビューも実績もありません。品質がどんなものなのか、納
Vue.jsでカテゴリー分けされた画像リストを実装
2023年2月7日 JavaScript, Vue.js たくさんある商品画像やポートフォリオの作品一覧などを見せたいときに、カテゴリーごとに絞って表示できたら便利ですよね。Vue.jsを使えば同じページのまま表示画像を変更できるので、管理も楽になりますよ。 ↑私が10年以上利用している会計ソフト！ 完成図 まずは画像を一覧で表示させ、上部にあるカテゴリー名のボタンをクリックすると、そのカテゴリーに属する画像だけを表示させます。 1. Vue.jsの読み込み設定 まずはHTMLの head 内にVue.jsを読み込ませます。別のバージョンやNPMでのインストール方法は公式サイトを参照してください。 <script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script> 2. 画像を一覧表示 Vue.jsの配列を使って画
【第4弾】少しのコードで実装可能な10のCSS小技集
2021年3月4日 CSS CSS小技集シリーズの第4弾！「【第3弾】少しのコードで実装可能な15のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 要素の上下左右中央配置 画面幅いっぱいに画像を配置 リストマーカーの色を変える 言語にあわせて引用符を変更 クリックで文字列を選択 背景画像を見切れないよう繰り返し表示 入力時の縦線の色を変更 ドラッグで要素のサイズを変更できるようにする floatは flow-root で解除 文章をカラム分けしてラインを入れる HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. 要素の上下左右中央配置 ボックスを要
PANTONEが選ぶ2021年の色「Ultimate Gray」と「Illuminating」
2020年12月15日 インスピレーション, 色彩 毎年恒例、PANTONEによる「来年の色」が発表されました！2021年は現実と希望を表すような「Ultimate Gray」と「Illuminating」です。通常1色のみ選ばれますが、今回は5年ぶりに2色が選出。そんな「Ultimate Gray」と「Illuminating」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Ultimate Gray」と「Illuminating」ってどんな色？ 現実的でどこか不安な「Ultimate Gray」と、明るくフレンドリーな「Illuminating」の組み合わせは、まさに現代の不安定な世の中に希望を見出すような配色ですね。二色を組み合わせることでより一層陽気な黄色が映えます。 色の具体的な数値は以下の通り： PANTONE：13-0647 Illuminating
Notionで複数ページの文書管理がはかどる！執筆、授業計画、レポートにもおすすめ！
2023年10月20日 便利ツール ドキュメント管理ツールとして人気が高まってきているNotion。とにかくたくさんの機能があるので、多岐にわたる使い方ができちゃいます。その中でも今回は書籍の執筆、授業計画（シラバス）作成、論文やレポート執筆など、複数ページの文書管理方法について紹介します。 ↑私が10年以上利用している会計ソフト！ Notionとは？ Notionは多機能ドキュメント作成ツールです。オンライン上でも、インストールしたアプリでも利用できます。 文書作成はもちろん… Trello風のカンバン形式でタスク管理したり… 計算や、ソート、絞り込みのできる表を作ったり… ToDoリストを作ったり… 名簿管理したり… なんでもできちゃいますね！！ Notionの利用料金 Notionは基本無料で利用できます！共有する人数や機能によって月額$4〜の有料プランもあります。 複数ページの文書
文字を3Dにしてカーソルやスクロールにあわせて動かせる【ztext.js】
2022年4月27日 JavaScript 文字を3Dにしてカーソルやスクロールにあわせてグリグリ動かせるライブラリー、ztext.jsをご紹介します。キャッチコピーや目立たせたい部分に使ってみると良さそうですね！ ↑私が10年以上利用している会計ソフト！ この記事は動画でも紹介しています。動画派の方はぜひどうぞ！ 動作デモ See the Pen ztext.js demo by Mana (@manabox) on CodePen. こんな感じで、カーソルに合わせて文字が動きますよ！ ztext.jsの実装方法 2ステップだけでかんたん実装！必要であればCSSの調整も行いましょう！ 1. JavaScriptファイルをHTMLに読み込ませる まずは公式Webサイトからztext.min.jsをダウンロードします。右クリックして「対象をファイルに保存」や「リンク先を保存」を選択し、ダウン
PANTONEが選ぶ2020年の色「Classic Blue」を使った配色例
2019年12月12日 インスピレーション, 色彩 毎年恒例、PANTONEによる「来年の色」が発表されました！2020年は夕暮れの空を連想させる「Classic Blue」です。穏やかで安心感のある落ち着いた色ですね。そんな「Classic Blue」に注目してみたいと思います。 ↑私が10年以上利用している会計ソフト！ 「Classic Blue」ってどんな色？ 広大で永遠に続くような夜空や海の深い青。寒色ですが、見ているだけでスッと心が安定する優しさも感じられますね。様々な色と組み合わせやすいベースカラーとしての役割もできそうです。 色の具体的な数値は以下の通り： PANTONE：19-4052 Classic Blue カラーコード：#0F4C81 RGB：R15, G76, B129 CMTK：C100, M76, Y25, K0 「Classic Blue」色の写真素材 Ado
表示領域にピタッと移動！CSSでスクロールスナップを実装しよう
2019年1月11日 CSS 画面領域いっぱいに広がるフルスクリーンレイアウト。近年ではよく目にしますね。スクロールした時に画面にピタッと各エリアを表示させたい時に使えるのが「CSSスクロールスナップ」です。JavaScriptなしでスクロール位置を調整してくれますよ！ ↑私が10年以上利用している会計ソフト！ スクロールスナップの基本 See the Pen scroll-snap basic demo by Mana (@manabox) on CodePen. スクロールすると、各エリアの中途半端な位置で停止せず、エリアがすべて見える位置でピタッと止まりますね！このデモの構成を見ていきましょう： HTML ピタッと移動させたい各要素を親要素で囲みます。この例では親要素に「container」、子要素に「area」というクラスをつけました。 <div class="container"
Googleドキュメントでブログを生成できるサービス「You Don’t Need WordPress」 | Webクリエイターボックス
2018年10月9日 便利ツール 手軽にWebサイトを作成するサービスは多々ありますが、「You Don’t Need WordPress」というWebサービスはGoogleドキュメントと連携させるという、今まであまり見なかった角度から発足したCMS。「WordPressは必要ないよ」という挑戦的なネーミングも気になったので、さっそく試してみました！ 「You Don’t Need WordPress」の使い方 さっそくYou Don’t Need WordPressのページにアクセスし、「Create Your Blog」ボタンからアカウントを作成してみましょう！WebサイトのURLは「https://www.youdontneedwp.com/ユーザー名」となり、ユーザー名がそのままドメインに使われます。 Googleドキュメントと連携させるGoogleアカウントを選択します。 Goo
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
Adobe XDでシンプルなワイヤーフレームを作ろう！便利なUIキットいろいろ
2018年7月2日 Webサイト制作, XD 新たなデザインツールとして浸透してきているAdobe XD。Webクリエイターボックスでも何度か紹介してきました。Adobe XDはデザインを作り込むだけではなく、その前段階であるワイヤーフレーム制作にもおすすめです。様々なUIキットと呼ばれるデザインテンプレートが配布されていますが、今回は凝ったデザインのものではない、シンプルなワイヤーフレーム向けのUIキットをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ シンプルなワイヤーフレーム制作向けのUIキット Wires jp Wires jpはAdobeが公開しているUIキット。これまでは後述する英語表記のもののみでしたが、この度日本語バージョンがリリースされました！ 日本のWebサイトでよく見かけるデザイン要素がつまっています。テキストも日本のものらしく変更されていますよ。 W
UIパーツごとに閲覧可能なスマホアプリのデザインギャラリーまとめ
2018年5月11日 スマートフォン スマートフォンアプリ用のデザインでちょっと調べ物をしたくてギャラリーサイトを巡っていたのですが、以前見ていたサイトが軒並み404で表示されなかったり、更新がとまっていてしょんぼり気分…。そこで最新のアプリが掲載されていて、且つ見やすくパーツごとに閲覧できるサイトを集めてみました。 ↑私が10年以上利用している会計ソフト！ UI Movement アプリを触った時の動きを動画で掲載しているUI Movement。見た目だけではない使い心地も伝わってきます。メール登録すると週に一度更新のお知らせも届けてくれるようです。 Pttrns PttrnsではiOSアプリだけでなく、Android、Apple Watch用のアプリも紹介しています。有料登録するとより多くのアーカイブを閲覧できたり、検索ができるようになります。 MobileMozaic MobileM
Adobe XDでWebデザインをしよう！画面作成からページ推移までの手順を紹介
2018年3月15日 Webデザイン, XD デザインやプロトタイプを作成できるAdobe XD。みなさん使っていますか？先日アップデートもされ、Photoshopとの連携がより簡単になったり、Sketchファイルも扱えるようになるなど、進化が進んでいますね。これまではWebサイトのデザインにはPhotoshopが多く使われてきましたが、これからはXDが主力となっていきそうな予感。ということでAdobe XDを使ったWebデザインの手順を紹介します！ ↑私が10年以上利用している会計ソフト！ 今回作成するもの このように簡単なホームページと問い合わせフォーム用のモーダルウィンドウの画面を作ります。プロトタイプ機能で画面推移のアニメーションも加えてみましょう！ 1. 画面の作成準備 Adobe XDを立ち上げ、Web用の画面を1280×800のサイズで新規作成します。「portfolio」と
Web制作者のためのおすすめChrome拡張15
2018年1月16日 Webサイト制作, 便利ツール 普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ！ ↑私が10年以上利用している会計ソフト！ Web Developer Chrome拡張｜Firefox Add-on｜GitHub｜公式サイト Webに携わる人は入れておいて損はない拡張のひとつ！長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています！カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。 CSS Peeper Chrome拡張
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2020年10月に読んだWeb・デザイン関連の本
2020年9月に読んだWeb・デザイン関連の本
2018年10月に読んだWeb・デザイン関連の本
Twitter 人気のつぶやき 8/25〜8/31 2018
2018年2月に読んだWeb・デザイン関連の本
