2021年12月7日 Wordpress WordPressでは2018年から「ブロック」と呼ばれる要素のかたまりを組み合わせてコンテンツを作っていくブロックエディターが利用できるようになりました。今回はテンプレートファイルはいじらず、WordPressの管理画面（ダッシュボード）でブロックを組み合わせるだけでWebサイトを作成できるフルサイト編集機能にフォーカスします！ ↑私が10年以上利用している会計ソフト！ フルサイト編集とは？ フルサイト編集（FSE＝Full Site Editingとも呼ばれます）は、投稿やページだけでなく、ヘッダーやフッター、サイドバー、ナビゲーションメニューなど、Webサイト内のあらゆる部分にブロックを使って構成できる機能です。つまり、これまでは投稿やページのコンテンツ部分のみブロックに対応していましたが、フルサイト編集機能のついたテーマであれば、Webサイ

2021年12月5日 話題のWeb関連情報 WebクリエイターボックスのTwitter: @webcreatorboxでは毎日Webに関する記事や美しいデザイン・写真などを紹介しています。その中で今週人気だったつぶやきトップ10を紹介します。見逃してしまった人はこちらでチェック！まだフォローしてない人はお気軽にフォローしてみてくださいね！ 1. デザイン：ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 デザイン：ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 https://t.co/Qmf5oNKGTw — Webクリエイター ボックス (@webcreatorbox) November 25, 2021 2. JavaScript：アクセシビリティに配慮した軽量・高機能スライダー【Splide】 Jav

2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など

2015年9月8日 ユーザビリティ 夏休みの後半、原稿用紙15枚の自由研究に苦しめられていた姪っ子（10歳）を「楽しそうだな〜」と手伝っていました。そんな時「私も久しぶりに自由研究したい！」と思い、ちびっこが家にいることですし、最近のちびっこがWebサイトをどのように利用しているのか研究してみることにしました。という事で今回の記事は自由研究風に進めようと思います！ ↑私が10年以上利用している会計ソフト！ 調べたいこと 認知度の高いWebサイトを、小学生がどのように利用するのかを観察し、こども向けのWebサイトに必要なもの、Webサイトを制作するうえで注意すべき点を調べます。 予想 難しい漢字は読めないので読みとばす イラストやキャラクターなど、可愛いものに興味を示す 明るい色彩のサイトに興味を示す まだ習っていない漢字や難しい表現は読み飛ばし、自分の理解できるもののみにフォーカスしていく

カテゴリー別配色アイデア100配色によってそのデザインの印象は大きく変わると思います。色は大切な要素のひとつですね！ということで、色の持つ印象別に配色アイデアをずらりと並べてみます。配色はおなじみ（？）のCOLOURloversから、「これは！」と思うものを選ばせて頂きました。素敵な配色がいっぱいのこのサイト、ぜひ覗いてみてください！また、今回紹介するのはあくまで一例ですので、自分なりにアレンジしてみるのも楽しいと思います。サイトの雰囲気にあう配色を探してみてください。 配色に関するおすすめサイトCOLOURlovers色をテーマにしたコミュニティサイト、COLOURlovers。自分の考えた配色を登録したり、お気に入りの配色を保存しておくことができます。今回はこちらから配色アイデアを選びました。 ウェブ配色ツール Ver2.0以前「配色に自信がなくても！Web デザインが好きになる配色ツ

ロゴ作成の手順を実例とあわせて紹介！企業のイメージを明確にすることを「ブランディング」と呼びます。企業ロゴはそのブランディングが色濃く反映され、企業のイメージを左右する重要な部分です。今回は「ロゴとはなんぞや？」というところから、私のロゴを実例に、ロゴの制作手順を紹介しようと思います。 先日「ロゴデザインする時の参考に！ロゴデザインギャラリーのオンパレードと注目記事色々！」という記事内で、なるほどな、と頷ける文章に出会いました。 WEB サイトは、エンドユーザーに伝わらないデザインだとわかればリニューアルするけど、ロゴデザインはエンドユーザーに伝わらないからと言って作り変えることは殆ど無い。それはつまり、ロゴはお客様の為に作るんじゃないと、ロゴは自分たちの意思や考えの象徴でもあるからそんなに簡単に変えるわけにはいかない、自分たち（ロゴに込められた物を背負う人達）の為に作る物なんだ。 ふむふ

2023年7月25日 CSS CSSで動かすアニメーションには、私自身まだまだ使いこなせていないプロパティーがたくさん眠っています。その中のひとつが steps というプロパティーでした。これまでよく使っていた滑らかな動作ではなく、段階ごとに要素を動かすことができます。実際にはどんな場面で使えるんでしょうか？今回はそんな steps プロパティーにフォーカスしてみます。 ↑私が10年以上利用している会計ソフト！ steps の記述方法 steps は animation や keyframes プロパティーとともに利用します。steps() のカッコの中には、いくつの段階を経て動作させるのかを記述。例えば5段階で変化させるなら、steps(5) と記述します。 .element { animation: img-move 5s steps(5); } @keyframes img-move

デッサン力とWebデザインWebデザインをやるのにデッサンなんて必要あるの？そう思っている人も多いと思います。確かにPhotoshopを使えば写真を手書き風に加工したり、イラスト風にすることも可能です。アイコンだって商用で使えるアイコンはたくさん出まわっていますね。それでも私は「デッサン力は必須ではない」けれど「あった方が絶対にいい」と思っています。そんなデッサンについて書いてみます。 デッサンとはデッサンとは、目で見た物体の形状や質感、陰影をモノクロで忠実に描写することです。デッサンを勉強すると言うことは見る力を養う事と同じで、実際に「描く」ことより、物体を「見る」能力とイメージを形に「表す」能力だと言われています。 Web デザインに関係あるの？アンケートの結果では、20%のデザイナーさんが全く描けないと回答しました。確かに描けなくても仕事はできます。ではなぜデッサンをすすめるのか？

2017年6月29日 Webデザイン Webデザインの「ルール」。そのいくつかを聞いたことがあると思います。でも「やってはいけない」「やらなければいけない」なんて聞いたら壊したくなるのが人間というもの（私だけ？）。今回はそんなWebデザインのルールを打ち破る素敵なサイトをNoupeで紹介されていたので翻訳してみます。次回のWebデザインの参考にしてみてください。 ↑私が10年以上利用している会計ソフト！ Webデザインの「ルール」に関する記事を見た事があると思います。事実、いやになるほど頭にインプットされている事でしょう。そして多くの場合その「ルール」は楽に生活を送るためのガイドラインとして役立っています。 しかし、あなたのアイデアがそのルールに当てはまらない場合、またはあなたがとにかく全てを型に当てはめるのにうんざりして、自分の創造力に挑戦したい場合はどうでしょう？そのルールは本当に変更

2014年1月28日 Webデザイン デザインをする上でシンメトリー（対称性）は頻繁に使われる手法のひとつです。古代から様々な場面で使われてきた美の構図、シンメトリーをうまく取り入れることで、安定感のあるレイアウトを生み出すことができます。今回はこのシンメトリーに焦点をあて、具体例とともに構成方法を考えてみようと思います！ ↑私が10年以上利用している会計ソフト！ シンメトリー（対称性）とは シンメトリーは広く「左右対称・反転」として知られていますが、他にも「回転」や「平行移動」、「拡大・縮小」も含んおり、これらの手法を取り入れた構成のことを言います。シンメトリーには規則性があり、バランスのよい安定した調和を感じさせます。シンプルで一度法則を覚えたら様々なデザインに取り入れられるので、デザイン初心者な方でも比較的容易にまとまったレイアウトを構成することができます。 シンメトリーとは異なる、

インターネットの世界を変えた24人新聞の代わりにニュースサイトを読み、手紙の代わりにEメールを送る…インターネットの世界は日々めまぐるしく進化しています。その中でもインターネットに革命を起こしたともいえる24人を紹介します。彼らの歴史は興味深いものばかりです。ぜひWikipediaと合わせて読んでみてください！ インターネットの父ヴィントン・サーフ／ロバート・カーンVint Cerf Photo by Charles Haynes 「インターネットの父」と呼ばれるヴィントン・サーフ氏とロバート・カーン氏は、インターネットのデータ転送技術の基盤となっている TCP/IP プロトコルを開発し、インターネットの創生に重要な役割を演じました。サーフ氏は聴覚障害者であり、聴覚障害者のための大学であるギャローデット大学の評議会のメンバーでもあります。カーン氏は世界初のパケット通信ネットワークであるアー

2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう

2014年12月24日 Webサイト制作, 便利ツール みなさん、タスクランナーを使っていますか？タスクランナーとはファイルの圧縮やSassのコンパイルなんかを、ファイルを保存したと同時に自動で行なってくれる素敵ツールです。制作のスピードアップも間違いなし！今回はそんなタスク自動化ツールのひとつ、gulpを紹介します。 ↑私が10年以上利用している会計ソフト！ gulpとは gulpとは、Node.jsを使ったタスク自動化ツールです。CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ！」というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。一度gulpでプロジェクトファイルを作成しておくと、自動化の手順を他の人と共有できるので、チームで開発する時にも力を発揮してくれます！ Gruntとの違

2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas

Webサイト設計図 - ワイヤーフレームの作り方WebクリエイターボックスではWeb制作の応用技術をよく紹介していますが、基本の流れはちゃんと説明していないな…ということで、「連載！実践で学ぶWebサイト制作ガイド」として、実際に1つのサイトを作りながらWeb制作の流れと方法をまとめて書いてみることにしました。この連載企画はブログ開始当初に考えていましたが、2年半ほど忘れてました…。今回は「ワイヤーフレームの作り方」です。 実践で学ぶ Web サイト制作ガイド：その 3目標：わかりやすいワイヤーフレームを作成することができる必要なもの：紙とペン対象レベル：超初心者 OK！目次誰のため？何のため？Web サイトを作り始める前に。Web サイトの構成図を簡単に作れる便利ツールWeb サイト設計図 - ワイヤーフレームの作り方 ← 今ここPhotoshop で Web サイトのデザインをしようP

2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が

2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、

初めてのデジタル一眼レフ動画撮影の前に知っておきたい基礎今回は私の所属する留学サポート企業Frogのブログでもインタビューさせていただいたふーみんによるゲストブログ！プロモーションビデオ撮影の際に気づいたこと、設定方法などを紹介してくれます！ちなみにそのプロモーションビデオのナレーションは私、Manaが担当していますw 動画の中にもちょこっと登場しているので、探してみてくださいね ;) 初めまして、バンクーバーにてクリエイター留学中のふーみんです！Mana さんが素敵な広報を担当する留学サポート企業Frogが運営し、僕自身の住居でもある『Frog House』のプロモーションビデオを制作しました！完全素人であった僕が、学校のインストラクターや友人のシネマトグラファーからのアドバイスをもとに１から動画撮影について学んだことを共有したいと思います。 制作したプロモーションビデオがこちら。今回

2014年8月17日 Webサイト制作 8回に渡り連載した「実践で学ぶWebサイト制作ガイド」がついに終わったので、ここで簡単にまとめておきます。この記事では基本的な流れを説明していますが、リンクをクリックでより詳しい説明記事を読むことができます。これからWebサイトを作ってみたい！という人のお役に立てればいいなあと思います :) サンプルファイルもあるので、ご自由にダウンロードしてくださいね！ ↑私が10年以上利用している会計ソフト！ サンプルファイル 今回作成したファイルをサンプルとして配布します。参考になれば幸いです。説明するために制作したものなので、学習目的以外でのご利用はご遠慮ください。Google Chrome, Safari, Firefox, IE8・9で動作確認済み。 デモ ダウンロード 1. プランニング 誰のため？何のため？Webサイトを作り始める前に。 突然Phot

2013年11月28日 Webサイト制作, 便利ツール 病院の待合室で何時間も待たされ、「暇だしWebサイトでも作ろっかなー」なんて思った事はありませんか？きっとあまりないと思いますが、今年にはいっていろいろあった私はそんな機会がたくさんあったので、いくつかのiPadアプリを使って作ってみました。作ったHTMLテンプレートは無料配布しています！そうです、アレ、iPadで作ったものだったのです。ふふ。 ↑私が10年以上利用している会計ソフト！ あると便利なスタイラスペン スタイラスペンはiPadなどのタブレットで使えるペンです。iPadを使ってお絵かきしたい人は持っているとなにかと便利。カナダのボクシングデーで$5位になっていたのでノリで買ったのがこのコ。ちょっとメーカーは覚えていないのですが、よくある無難なタイプの物ですね。書き心地は悪くないのですが、ペン先が太いので、細かい字や絵は書きづ