サイゼリヤの完全攻略マニュアル｜マッシ｜エッセイスト・ライター
更新日: 2024.07.21 アレンジを新たに５品目加え、19品目に更新 2021.06.02 本記事を公開 皆様へ愛を込めて感謝のメッセージ サイゼイリヤの完全攻略マニュアルを公開して3年、多くの人々に読んでいただけて嬉しい。現在もこのマニュアルが活躍しているようで、みなさんが喜んでいる笑顔が浮かんでくる。もちろん、僕もいつも通りサイゼリヤを楽しんでいる。そして、公開してから約150万PVになっていて想像以上だ。本当にありがとう！ これからも、サイゼリヤで楽しんでいこう。 2024.07.21 マッシこんにちは、フードライター マッシ（＠massi3112） はじめにサイゼリヤが大好きで行くといつもイタリアに帰った気分になる。イタリア流の食べ方を知ると更に美味しくなるだけではなく、カスタマイズして自分にピッタリの味を簡単に作れる。毎日サイゼリヤに行っても飽きない理由は調整できること。ツ
バージョン管理ツール「Git」は一体どういうものなのか？
「バージョン管理ツールのGitとは一体どういうものであるのか？」について簡単にまとめてみました。今回はGitの概念や考え方についてを中心にまとめており、「Gitが何なのかよく分からない」「実際のコードに触れてみたもののよく分からず使うのをやめてしまった……」といった人向けに記事を作成しています。 Git https://git-scm.com/ バージョン管理とは、要するに「ある時点でファイルを別に保存しておく」ということです。別のファイルに保存しておけば、またそこからやり直すことができます。これを直感的に行うと下図のような「手動ファイル名バージョニング」になりがちです。ただし、この「手動ファイル名バージョニング」は命名する時の思いつきで決めることが多く、後で見た時に「どれが本当の最新ファイルなのか分からない」となりがちなのが問題です。 これに対する一つの解決策が「プロジェクトフォルダに『
フォトショップで写真の色を置き換える７つの定番テクニックまとめ
フォトショップでの写真の色の置き換え、変更は特に要望の多い重要なテクニックのひとつです。 しかし、用途に応じてツールを使い分け、色の置き換えを行っているひとは、どれだけいるでしょう。 今回は、どんな写真にも応用できる、色の置き換え・変換のお手軽Photoshopテクニックを、実践のデザインサンプル例と一緒にまとめてご紹介します。 これらの方法を試してみることで、どんなデザインでもお手軽に色の置き換えを行うことができるようになります。 コンテンツ目次 色を変換・調整する方法 特定の色だけを置き換える方法 「モデルが着用しているドレスの色を変更したい。」 「車の色を背景に合わせて変更したい。」 「白色のドレスの色を変更したい。」 「背景の壁の色を変更したい。」 「ブランドカラーに合わせてソファーの色を変更したい。」 さいごに、 どんな写真にも応用できる、色の置き換え・変換のお手軽Photosh
HTML 5.1で変更されたsection要素の使い方、header要素とfooter要素のネストについて解説
2016年11月1日に、HTML 5.1が勧告されました。HTML 5から新しく加えられた点、削除された点、変更された点がいろいろあります。 その中から、ページのアウトラインを組み立てる上で重要なsection要素の使い方、header要素とfooter要素のネストについて具体的な事例を添えて紹介します。 Document Outlines in HTML 5.1 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 私は以前、HTMLのページにvalidなアウトラインを持つ重要性について説明しました。 先日、HTML 5.1が公式にリリースされました。 興味深い変更が数多くあり、そのうちの2つはvalidなアウトラインに関係しています。 削除 アウトラインを作成するh1要素を入れ、ネストされたsection要素の使用。 変更 hea
Photoshopのデザイン加工に欠かせない最新チュートリアル、作り方38個まとめ 2016年11月度
Photoshopの豊富なデザイン機能を利用して、写真加工から写真合成、テキストエフェクトやレタッチなどさまざまなデザインアイデアを実現する、最新チュートリアルをまとめてご紹介します。覚えておきたい基本的なPhotoshopテクニックから、より高度なデザインエフェクトを取得したいひとにもオススメしたい作り方をまとめています。 ますます進化するデザインツール Photoshop の実践で使えるテクニックを学んでみてはいかがでしょう。どのチュートリアルもステップごとに進めることで、細かい作り方まで分かりやすく理解することができるでしょう。 詳細は以下から。 Photoshopのデザイン加工に欠かせない最新チュートリアル、作り方38個まとめ 写真イメージを手書きスケッチ風に仕上げる方法 Photoshopの基本的な機能のみを利用し、高度なスケッチエフェクトを完成させます。作り方を覚えておけば、色
プロのデザイナーが実践している！PhotoshopでWebデザインを素早く、効率的にするための8つの方法
PhotoshopでWebデザインのワークフローを効率的にするために、プロのデザイナーが実践している8つのテクニック・方法を紹介します。 Adobe CCのライブラリをもっと活用しよう、と思いました。 8 ways to design sites faster in Photoshop 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. ファイル管理のポイントは構造化 2. CSSフレームワークは勉強になる 3. PSDのレイヤーはコンテンツごとにフォルダ分け 4. よく使う操作はショートカットを覚える 5. Adobe CCのライブラリは使わないと損 6. イメージとベクターはスマートオブジェクトで 7. スタイルガイドをどう活用するか 8. コーダーと、そしてチーム内での共同作業 まとめ: デザインは正直に 1. ファイル
スマホサイトのナビメニューを見直そう！基本3パターンの長所と短所、改善ポイント
ウェブやモバイルアプリのナビゲーションは、直感的で予測できるべきです。新しいユーザーとリピーターの両方が、どのようにアプリが操作するのか理解できるべきなのです。 しかしモバイルの小さな画面上では、分かりやすくアクセスしやすいナビゲーションメニューを作成するのは大変な作業で、コンテンツの優先順位に応じてUI要素が必要になります。異なるナビゲーションメニュー・パターンを利用し、他の解決方法を試みても、他のさまざまなユーザビリティーの問題点が出てきてしまいます。 この記事では、ハンバーガーメニューとタブメニュー、ジェスチャー型ナビゲーションといった、モバイルアプリの基本的な3つのナビゲーションパターンのメリットやデメリット、デザインの解決方法について詳しく見ていきましょう。 コンテンツ目次 1. ハンバーガーメニュー 概要 メリット デメリット デザインの解決方法 2. タブメニュー 概要 メリ
UI/UXデザインツールの大本命、Adobe XDの私が大好きな便利な機能をすべて紹介します
Adobe Experience Design（以下、Adobe XD）の評判はいいって聞くけど、実際のところどうなの？ 使えるの？ そんな疑問がすっきりするAdobe XDで何ができるのか、Webサイトやアプリのワイヤーフレームやプロトタイプを作成するのに便利な機能を紹介します。 Wireframing and Prototyping in Adobe XD 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 UI/UXデザインに適したツールを探して Adobe XDとは Adobe XDのアートボード Adobe XDのシェイプ操作 Adobe XDのオブジェクトのグループ化 Adobe XDのリピート グリッド（Repeat Grid） Adobe XDのエクスポートとインポート Adobe XDでプロトタイプを作成 Adobe X
ほんの数クリックで完成！文字をかっこよくするPSテキストエフェクトまとめ
Photoshopを利用し、短時間で手軽に、みんながあっと驚く高品質なデザインを作成する方法はいくつかあります。 そのなかでも、文字を挿入し、ボタンを数クリックするだけで、見違えるほど魅力的にするテキストエフェクトは、グラフィックデザインにぜひ活用したい素材です。今回は参考にしたい PSD ファイルを、ファイルの基本的な使い方、カスタマイズ方法と一緒にご紹介します。 詳細は以下から。 ファイルの編集、カスタマイズ方法 では実際にファイルをダウンロードし、どのように編集するのか具体的に見ていきましょう。今回はデモとして以下のファイルを利用しています。 Molten Text Effect – DealJumbo まずPhotoshopでファイルを開き、レイヤーパネルを確認します。パネルの一番上に配置された、サムネイルの右下にアイコンが表示されているレイヤーは、スマートオブジェクトレイヤーであ
これが知りたかった！よく使うUI要素をFlexboxを使ってシンプルに簡単に実装するチュートリアル | コリス
Flexboxの基本的な使い方から、ヘッダ・フッタ・ナビゲーション・タブ・カードなど、Webページでよく使うUIコンポーネントをFelxboxで実装するチュートリアルを紹介します。 2016年1月12日にIEの古いバージョンのサポートが終了し、Flexboxをそろそろ使うか、と考えている人も多いと思います。 Flexbox Patterns Flexbox Patterns -GitHub Flexboxの実装に役立つ各プロパティの説明は、下記が分かりやすいです。 CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 「display: flex;」からはじめよう 01. 要素を水平に配置する 02. Flexboxで実装する「タブ」 03. Flexboxで実装す
すぐに実践したくなる！リンクがGoogleなどの検索エンジンのランキングにどのように影響を与えているか分かりやすく解説
リンクが検索エンジンのランキングにどのように影響を与えているかを分かりやすく解説した、すぐに実践できるリンクに関する7つのセオリーと実装のアドバイスを紹介します。 GIFアニメーションを使った解説は、SEOやGoogleってなんだか分かりにくいという人でも非常に分かりやすいと思います。 7 Illustrations of How Topical Links Impact Rankings, in Theory and Practice 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 ハブとオーソリティページ アンカーテキスト トピック センシティブ ページランク リーズナブル サーファー フレーズベースのインデックス ローカル インナー コネクティビティ ゴールデン クエスチョン SEOに効果的なリンクを構築するための実践的なアドバ
2分で分かる！Sketchのさらに便利になった新機能を徹底解説
今年からSketchを使用するようになったのですが、使えば使うほど便利だなぁ、と実感する毎日です。そんなSketchは先日3.4にバージョンアップし、デザインのワークフローを改善する新しい機能がたくさん追加されました。 さらに便利になったSketchの新機能の使い方を分かりやすいアニメーションGIF付きで紹介します。 Visualize Sketch 3.4 New Features Sketch 3.4の公式アナウンスは、下記ページを参考にしてください。 Sketch Blog - Sketch 3.4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 1. アートボードをローカルネットワークで共有 2. コピーペーストの強化 3. 自動保存をオフにした方がいいのはどんな時？ 4. Material Designのアイコン作成 5.
[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js
スマホアプリやWebアプリのプロトタイプやデモの操作を見せる時などに、スマホでのタップやデスクトップでのクリックを表現する波紋のアニメーションを簡単に実装できるスクリプトを紹介します。 ランディングページや使い方ページでこういうのよく見かけますね。 TouchPoint.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="touchpoint.min.js"></script> </body> Step 2: JavaScript タッチポイントの対象にしたいDOM要素を指定して、スクリプトを実行します。 プロトタイプであれば、「window」でいいでしょう。 <script> TouchPoint.init(window); </script> エレメントを指定したり、波紋のカラーや
![[JS]スマホアプリなどのデモ操作を見せる時により分かりやすく、タップしている状態をアニメーションで表現するスクリプト -TouchPoint.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/46be404c8d2f64ff7f9750d80ed6af78be5437ce/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080501.gif)
WordPressの制作・公開・運用・セキュリティなどに関する重要なチェック項目のまとめ
WordPressの制作の準備、制作、公開、SEOやセキュリティやメンテナンスなど運用における、WordPressでサイトやブログを運営する際の大切なポイントをまとめたチェックリストを紹介します。 Killer WordPress Checklist: 101+ easy steps to launch your next website! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 チェックリストはインフォグラフィックにもなっており、元ページでダウンロードできます。 インフォグラフィックの一部 はじめに WordPressの制作準備時のチェックリスト WordPressの制作時のチェックリスト WordPressの公開時のチェックリスト WordPessのSEOのチェックリスト WordPessのセキュリティのチェックリスト W
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新着記事
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
デザイナーがロゴマークを作る時・使う時に知っておくべき「ロゴマニュアル」 | Swings
インフラエンジニアの綺麗で優しい手順書の書き方
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
