Web制作記事一覧
詳細を見る
Webデザイン
Figmaでオブジェクトを合成してキラキラアイコンを作ろう
以前、「XDでシェイプの合成を使ってキラキラアイコンを作ろう」という記事を書きましたが、AdobeがXDの単体プランの取り止めを行い、XDを全面的に押し出すことは無くなってきているため、Figmaでのキラキラアイコンの作成方法を紹介いたします。 基本的な作り方はXDと同じ 基本、以下の記事のStep1〜Step3はほとんど同じになります。 まとめると という手順になります Figmaでは枠線が自動 […]
詳細を見る
Webデザイン
Adobe XD 「シェイプの合成」でキラキラアイコンを作ってみよう！シェイプの合成についても解説！
突然ですが、遊び心やあしらいに “キラキラアイコン“を使いたいと思ったことはありませんか？ Font AwesomeやMaterial Iconsにもあったりなかったりしますが、この”キラキラアイコン”、XDと発想の転換で自作できちゃうんです。 目標：背景色や大きさ、枠線、縦横比を変更できるアイコンを作る 今回目標とする形は画像のようなキラキラです。 […]
詳細を見る
Webコーディング
WordPressのカスタム投稿タイプでよくある質問（FAQ）を作ろう
Webサイト制作の仕事をしていると「よくある質問」を実装することが多々あります。 静的なコーディングでも作ることはできるものの、お客さんが更新することができないため、運用コストが上がってしまうことも…。 そこで、WordPressのカスタム投稿タイプの機能を使用することで、更新可能な「よくある質問」を作ることができます。 今回はカスタム投稿タイプでよくある質問を作る方法を紹介いたします。 この記事 […]
詳細を見る
Webコーディング
JavaScriptのDOM操作、覚え方のコツ
コーディング初学者の方が難しいと感じる “JavaScript”。 HTML/CSSはマークアップだけだったのに、急に変数やら条件分岐、繰り返しなどのロジックが入ってきて混乱することでしょう。 そんなあなたのためにJavaScriptが楽しくなるちょっとしたコツを紹介します。 そもそもDOM操作って何？ JavaSciptではDOM操作という概念があります。 「DOM」とは […]
詳細を見る
Webコーディング
「ホームページってなんで高いの？」Web制作の価値提供の話
Web制作の仕事をしていてお客様と接しているとよく、「ホームページってなんでこんなに高いのですか？」と聞かれることがあります。 極論、高いと感じるならWebサイトは作る必要がないと思っています。 SNSでも頑張れば集客はできますし、こだわりがなければ無料でサイトを作るツールもたくさんあります。 そんな便利な世の中でなぜ、Webサイト制作の依頼があるのでしょうか。 そこには「目的」と「価値」が大きく […]
詳細を見る
Webコーディング
なぜあなたのポートフォリオサイトは完成しないのか。原因はたったひとつ！制作着手前のステップも公開！
近年、Web制作を仕事にしようとSNSのプロフィール欄に自作のポートフォリオサイトのリンクを添付している方が多くみられます。 その中でも気になったのが、 ナビゲーションのリンク切れ ページのコンテンツが途中 リンク遷移先が他と同じページ といった「完成していない」ポートフォリオサイトが散見されます。 そして数ヶ月後また同じサイトを見るとまだ見せられる段階にない…。 完成もされていないので、メンテナ […]
詳細を見る
Webコーディング
flexboxの救世主「gap」プロパティが左寄せデザインに超便利！
突然ですが、以下のようなレイアウトを作るとき、どのような実装をしますか？ 3列の横並びボックス 間のマージンは10px 改行すると左寄せ 下部にはマージンは必要なし flexを利用する方法、いくつか思いつきますよね。 でも、gapプロパティを利用すれば簡単に実装できちゃうんです。 すぐに確認したい方は目次から「gapプロパティを使用しましょう」のアンカーリンクをクリックしてください。 それぞれ例を […]
詳細を見る
Webコーディング
SafariやChromeで表示が異なるボタンやセレクトタグを初期化して装飾しよう
ボタンやチェックボックスをCSSで装飾せずにデフォルトのままで使用していませんか？ 実はこれらのタグ、デフォルトで当たっているスタイルが各ブラウザで異なるんです。 iPhoneのSafariだと少し使いづらいなんて声もよく耳にします。 ボタンやチェックボックスに対してCSSを当てて全てのブラウザで見た目を統一させる方法を紹介いたします！ 各ブラウザでのデフォルトの表示 こんなタグを作成しました。 […]
詳細を見る
Webコーディング
【構造化データ】見た目だけじゃない「よくある質問（FAQ）」の作り方
構造化データの実装とともにアコーディオン型のよくある質問（FAQ）の作り方を紹介します。 まずは見た目から 早速ですがよくある質問の作り方を紹介します。 よくあるアコーディオン型のFAQです。summaryやdetailsタグを使用した実装方法もありますが、CSSやJavaScriptで装飾、操作のカスタマイズが面倒なのでdivタグで作っております。 See the Pen FAQ by Ito […]
詳細を見る
Webコーディング
【テスト工程】Webサイト納品前のチェックリストを大公開！
Web制作での品質管理。皆さんはどうしてますでしょうか？ Webサイト納品前の大事な工程「テスト」。チェックリストを公開します。 表示崩れはないか Webサイトに重要な要素「デザイン」。 制作現場ではデザインを基にコーディングするのが一般的です。 そしてそのコーディングがデザイン通り、もしくはデザインに則った形になっているかどうかをチェックします。 画像や文字がはみ出していたり、スマートフォンだと […]
