TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】
オーダーメイドコース
icon
icon
CSS

CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】

初心者向けにCSSでフォントをメイリオにする方法について解説しています。これはWindows OSで使用されているフォントのひとつです。メイリオの特徴とfont-familyを使った指定方法、MacOSの場合の注意点を覚えておきましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

CSSでフォントをメイリオにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

フォントをメイリオにする方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

CSSでフォントをメイリオにする方法について

CSSでフォントをメイリオにする方法について解説してみます。

 

メイリオというフォントについて

まずは、メイリオというフォントについておさらいしましょう。メイリオは、Windows OSにて使われているフォントで、従来のMSゴシック、MSPゴシックに代わって採用されたシステム用の書体のことです。

システム用書体なので、WindowsOSの入ったマシンを起動したり、ブラウザなどであらゆる箇所に表示されています。なめらかに・視認性・可読性に優れたフォントです。

語源は日本語の「明瞭」から来ており、明瞭に、視認性・可読性を向上させるために開発されました。漢字・ひらがな・カタカナ・数字それぞれがゴシック体です。

従来のMSゴシックからは、大きく形が変わり、Windows10など最新バージョンでも、バージョンアップされた「メイリオUI」として引き続き採用されています。

【参考資料】メイリオについて

ちょっと難しい用語も出ていますが、以下は国内大手のフォントメーカー「モリサワ」のフォント解説です。
参考資料として読んでみてください。

Windows Vista以降のシステム表示用に採用されたフォントで、フォントの名称は「明瞭」に由来します。
従来のMS UIゴシックよりも高い可読性を目標に作られました。
画面描画用のビットマップを持たないため、すべてのサイズでClearTypeによるスムージング処理が行われます。
文字セットはWindows Vistaで採用されたJIS X 0213：2004に対応し、Windows XPまでに搭載されていたフォントとは122文字（マイクロソフト社公表文字数）の字形が異なります。キリル文字やプロポーショナルのギリシア文字などでメイリオ固有の文字セットを持っているため、この文字セット自体を「メイリオ文字セット」と呼ぶことがあります。
「メイリオ文字セット」をはじめとするマイクロソフト社の文字セットは、主要フォントメーカが基本としている文字セット「Adobe-Japan1」に比べて、非常に独特で、JIS2004対応フォント「MS明朝」「MSゴシック」、そして「メイリオ」の間であっても、完全な互換性はありません。

モリサワ フォント用語より引用

また、メイリオUIについての詳しい解説は以下のサイトも参考になります。
意外と知らないメイリオUI・Yu Gothic UI。UIフォントとはなんなのか（外部サイト）

 

[PR] Webデザインで副業する方法とは

サイト内のフォントをメイリオ指定してみよう！

font-familyを使おう

フォントを指定するには、CSSの「font-family」を使います。サイト内で文字の表示を指定するCSSです。WordやEXCELなどで、文字を統一するためにインストールされたフォントを選んだ経験があるのではないでしょうか？それと同じで、制作者側から書体を指定します。

body{
  font-family:フォント名;
}

実際にフォントをメイリオ指定する

実際に記述する場合は、以下のようになります。実際は、古いバージョンのWindows向けユーザー、Mac向けユーザーへも配慮するのでもう少したくさんの記述をしますが今回はメイリオだけ。とします。

body{
  font-family:'メイリオ', 'Meiryo', sans-serif;
}

フォント名は、日本語表示の場合、シングルクォーテーションまたはダブルクオーテーションでくくります。あれ？2つはいっているじゃないか、と思われたかもしれません。これは、例えば、OSが英語である場合も想定して、という意味です。OSが英語などである場合は、Wordなどで出てくるフォントもすべて英語ベースになります。

なので、日本語向けOSのカタカナ表記、英語ベースのOSの場合も考慮し、フォント表示も英語と2種類で表記しておいたほうが良いのです。

最後に入れているのは、メイリオがOSにインストールされていない場合を想定して、「メイリオも無ければ、同じゴシック体表示をして欲しい！」という意味です。

 

【参考資料】メイリオが入っていないMacOSではどうなるの？

プリインストールされていないMacOSでは、font-familyで指定してもメイリオでは表示されません。
端末にフォントデータが入っていないからです。

ここは仕方ありません。Macでプリインストールされているフォントも添えておくことがベターでしょう！

body{
  font-family:'メイリオ', 'Meiryo','ＭＳ ゴシック','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
}

今回は、CSSでフォントをメイリオにする方法を解説してみました。

 

監修してくれたメンター

ゆかちん先生

フリーランスのクリエイティブディレクター。
制作会社、インハウス、スタートアップ企業などで、グラフィックデザイン・ウェブデザイン・アプリデザイン、ウェブディレクションなどに携わってきました。TechAcademyではWeb Designコース・ウェブディレクションコース・WordPressコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

TechAcademyでは初心者でも、オリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

レンダリングブロッキングリソースとして扱われるCSSを現役エンジニアが解説【初心者向け】

レンダリングブロッキングリソースとして扱われるCSSについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
CSS

枠線などを指定したい！CSSのborderの使い方【初心者向け】

今回はCSSで書くborderの使い方に関する解説記事です。borderプロパティは非常に便利で、どのサイトをデザインする上でも必要になってくる知識なので、ぜひ...
CSS

iframe内の要素がCSSで効かない原因と対処法を現役エンジニアが解説【初心者向け】

iframe内の要素がCSSで効かない原因と対処法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
CSS

CSSのinline-blockの改行による隙間を消す方法【初心者向け】

CSSのinline-blockの改行による隙間を消す方法について解説します。 ソースコード上で改行があるとインライン要素やインラインブロック要素に空白が...
CSS

CSSのbox-shadowで影の向きを下だけにする方法を現役エンジニアが解説【初心者向け】

CSSのbox-shadowで影の向きを下だけにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
CSS

外部ファイルを読み込む！CSSで@importを使う方法【初心者向け】

CSSで外部ファイルを読み込む際に役立つ@importの使い方について解説します。 ファイル分割してCSSの記述をする時などに知っておくと便利な知識です。...
CSS

あわせてよく読まれている記事

【Webサイト作成に役立つ！】中古ドメインと新規ドメインを比較してみた[PR]

自身や企業でWebサイトを作成しようと思ったらまず最初にドメインとサーバーを用意する必要があります。 基本は新しくドメインを取って作ることが多いですが、過去に誰かが使っていたドメインを再利用することも可能なのです。それを中古ドメインと呼びますが、新規ドメインと何が違うのか、どんなメリットがあるのか詳しく紹介しています。 やったことは無いけれど「これからWebサイトを作ってみたい」という方はぜひ知っておきたい内容でしょう。   大石ゆかり 田島メンター！ドメインを取得したいのですが、何から調べたらいいでしょうか〜？ 田島悠介 まず最初に、ドメインには新規ドメインと中古ドメインの2つがあるということを知っておこう。 大石ゆかり 中古というと、過去に誰かが使ってたということですか？ 田島悠介 そうだね。ここでは新規ドメインと中古ドメイン、それぞれのメリットとデメリットについて解説するよ。   目次 新規ドメインとは 新規ドメインのメリット・デメリット 中古ドメインとは 中古ドメインのメリット・デメリット 中古ドメインを利用するには   新規ドメインとは 通常Webサイトが閲覧できるのは、人が住んでいる家と同様に指定された住所に訪問するからです。つまり、インターネット上での住所を取得する必要があり、住所のことを独自ドメインと呼びます。 そして、独自ドメインは、ドメイン指定事業者と契約をして取得することができます。 ドメインを取得する代表的なサービスとしては、「お名前.com」や「ムームードメイン」などがあります。   新規ドメインかどうか確認する方法 取得したいドメインが本当に新規のものなのかドメイン年齢というツールを使ってチェックすることができます。 例えば「yahoo.co.jp」と入力してドメイン年齢を調べるをクリックすると、ドメインの取得日が表示されます。 取得日が表示されれば過去に運用されていた、もしくは現在も運用しているドメインとなります。 新規ドメインであれば、取得日が表示されないので、事前に確認しておきましょう。   [PR] Webデザインで副業する方法とは新規ドメインのメリット・デメリット メリット 新しく事業やプロジェクトを立ち上げる場合、ゼロからブランドを確立することができます。「yahoo.co.jp」のようにサービス名と会社名、そしてドメイン名が同じであれば長期的にブランド認知を獲得することができるでしょう。   デメリット 新しくドメインを取得した場合、検索エンジンにとっても認知度が無い状態からスタートするので、検索結果の上位に表示されるまである程度の時間がかかります。 検索順位が上位にいるサイトは、「更新頻度が多い」「サイトのページ数が多い」「コンテンツ自体の品質が高い」「多くのリンクを獲得している」といったSEO対策がしっかりしています。 当然これらを満たすためには長い月日が必要で、新規ドメインで始める場合ゼロからのスタートとなるので、検索エンジンにインデックスされるまでに時間を要するでしょう。   田島悠介 新規ドメインについての概要だね。 大石ゆかり 検索で見つけやすくなるまでには、少し時間がかかるということですね。 田島悠介 ただし履歴がないということは、その分安心して利用できるということでもあるんだ。次は中古ドメインについて見てみよう。   そもそも中古ドメインという言葉自体を初めて聞く人もいると思います。中古ドメインを利用するメリットは何なのか、中古ドメインはどこで取得できるのかなど、これからWebサイトを作ろうと考えている人に役立つはずです。   中古ドメインとは 中古ドメインとは、過去にあるサイトで使われていたドメインを指します。運営者がサイトを閉鎖してドメインを手放したり、期限切れでフリーになったドメインです。 過去に運営されていたサイトのドメインパワーをそのまま引き継ぐので、クローラーや検索エンジンに見つけてもらいやすいのが特徴です。 とはいえ、中古ドメインがSEO的に良いとは限らず、以下で紹介する3つのポイントを注目しておきましょう。   1. 被リンクの質 新規ドメインと中古ドメインの大きな違いとして、「被リンク」が挙げられます。 被リンクとは、外部のWebサイト上に自分のサイトのリンクが設置されることです。検索エンジンは、良いコンテンツであれば多くのサイトで紹介、引用されているという発想で、検索順位を決める上で被リンクの数や質が指標になっているのです。 被リンクの質をチェックする上で、良質なWebサイトから自然な形でリンクが貼られているかが重要です。同じサイト・ページから100個も200個もリンクが貼られていたら検索エンジンは不自然に思うはずです。 下記の被リンクは、悪質なリンクとして認識されているので、作為的なリンクでないかチェックしておきましょう。 サイトに影響を与える悪いリンクの例 金銭を払って獲得したリンク リンクのみが貼られているページからのリンク キーワードが大量に含まれたアンカーテキストが日本語として不自然なリンク   2. Googleペナルティの有無 悪質サイトだと評価されるとGoogleから手動ペナルティを受ける場合があります。 この場合は、別のドメインを利用すべきでしょう。   3. 過去のサイト運用履歴 中古ドメインは、ドメインパワーを引き継ぐことを主な目的としているため獲得したリンク元のサイトに注目することが重要です。 一般的に好ましくないジャンル（アダルト・ギャンブル）のサイト履歴があった場合、好ましくない被リンクを受けている可能性が高いです。   中古ドメインのメリット・デメリット メリット 中古ドメインを利用するメリットは主に3点あります。 過去のサイトの評価を引き継げる 検索エンジンに早くインデックスされる 新規ドメインより検索結果への反映が速い また、被リンクが付いていることが大きなメリットです。中には教育機関や政府機関などから被リンクを貰っている評価の高い中古ドメインもあります。 新規ドメインでは、サイトを公開してすぐに被リンクを貰うことは難しいですが、評価の高い中古ドメインほど良いサイトから被リンクが貼られている状態でスタートすることができます。 より早く検索結果に反映したい人にとっては大きな特徴と言えるでしょう。 その他にも、誰かが取得していて新規で購入できないドメインを手にいれることも可能です。   デメリット 過去に使われていたサイトの評価を引き継ぐ形になるので、アダルトサイトや悪質なサイトなどそもそも検索エンジンから評価されていないドメインを利用すると、どれだけ良いコンテンツを作っても検索上位に表示されるのは難しいでしょう。 URL自体がブラックリストに登録されている場合もあるので、むやみに中古ドメインを利用するのは危険です。 また、ドメイン自体を取得するのに数万円の初期費用が必要になります。   中古ドメインを利用するには 中古ドメインを利用するならアクセス中古ドメインをチェックしておきましょう。単純に「運用期間が長い」「被リンクが多い」という情報だけで判断せず、総合的に判断する必要があります。 アクセス中古ドメインでは、以下の項目などを比較することができます。 被リンク数 被リンク詳細情報 参照元ドメイン数 参照元IP数 ドメインの年齢 SNSのシェア数 ドメインの有効期限 リンクを受けているページがどのページなのか確認することもできますし、リンク元のサイトも見ることができます。 他にも外部ツールを使って手動ペナルティやブラックリスト、過去のWebサイトの運用履歴なども確認できます。   また、被リンク数、参照元ドメイン数、参照元IP数、参照元クラスC分散、バックリンクスコアの5項目を独自の指標を用いて点数（パワーランク）をつけています。 アクセス中古ドメインの中古ドメイン販売リスト パワーランクは4つに分かれていて、ブロンズ・シルバー・ゴールド・プラチナという順にランク付けされています。メインサイトを作るのであればゴールド・プラチナのランクが向いているでしょう。 このパワーランクや被リンク数を指定して検索することもできるので、目的に合ったドメインが探せるはずです。   大石ゆかり ちなみにドメインを購入した後はどこに更新料を支払うんですか〜？ 田島悠介 ドメインが登録されているレジストラに支払う必要があるんだけど、アクセス中古ドメインで購入したらPure Domainっていうレジストラに納品されるよ！納品したら他のレジストラに移管することもできるからね！ 大石ゆかり じゃあ新規ドメインと同じで更新料を払えば利用できるってことですね♪ 田島悠介 そうだね！このサービスだとドメインの購入も更新も一緒にできるのが特徴だね！   新規ドメイン・中古ドメインそれぞれ詳しく紹介しました。 より早くクローラーに認識、検索エンジンにインデックスされることを望んでいるのであれば中古ドメインを使うことも選択肢に入れると良いでしょう。全く新しいWebサイトでもドメインは過去に使われていたものを使用することも考えてみてください！ アクセス中古ドメインを見てみる
Webデザイン

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 また、本記事は、Doru Ciobanu氏によって投稿されました。   タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。 フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。 しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。 そして、これから紹介するのは、2016年に最も売れた50のフォントです。   1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。 編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。   2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。   [PR] Webデザインで副業する方法とは3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。 軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。   4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。 人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。   5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。 垂直方向の文字が、水平方向の文字とアセンダ （アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。 可読性が重視されるテキストに最適です。   6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。 このフォントファミリーは51種類のウェイトから構成されています。 古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。   7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。 グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。   8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。 ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。   9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。 小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。   10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade
Webデザイン

【初心者必見！】Webデザイナーが持っておくべき「ポートフォリオ」とは

Webデザイナーとして就職・転職する上で欠かせないのがポートフォリオ。 この記事では、事例も紹介しながらポートフォリオとは一体なんなのか分かりやすく解説しています。 Webデザイナーがどんな仕事を担当する人なのか、詳しく知りたい方はWebデザイナーとはの記事も合わせてご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   Webデザイナーに必須のポートフォリオとは Webデザインを仕事にしている人は増えてきて、インターネットを使った仕事の受注や就職においてもその競争率は高くなってきています。そのとき重要になるのがアピールの方法です。 Webデザイナーの場合ポートフォリオという形で、自分の実績やスキルを相手に示すことができます。ロゴやバナー、Webサイトのデザインなど今まで作ってきたものをポートフォリオにまとめておけば、何を作ってきたのか一目で理解できます。 転職のしやすさにも良い影響を与えますし、フリーランスとして働く上では必ずと言っていいほど持つべきでしょう。   ポートフォリオの作り方 ポートフォリオは内容を詳細まで決められているものではありませんが、ある程度基本となる情報は載せておく必要があります。 まず、作ったWebサイトのタイトルとURL、スクリーンショットです。スクリーンショットがなければ文字での紹介となり意味がなくなってしまいます。 また、制作にかかった時間や、自己紹介もまとめておくことで面接時の質問を誘導することにも一役買います。 印象に残るようなデザインにすることは大切ですが、統一性を失ってはかえってごちゃごちゃとした印象になってしまうため見やすさを意識することも忘れてはいけません。 WordPressで使えるポートフォリオ用テーマも紹介しているので、手軽に作ることも可能です。   [PR] Webデザインで副業する方法とはイケてるポートフォリオの事例 ポートフォリオを始めて制作する場合には特に、他人のポートフォリオを参考にすることでイメージが掴めるようになります。 Webデザイナーの成果物の居場所はすべてインターネット上にあるため、検索すればすぐに見つけることができます。ここでは、その中でも著名人の作ったポートフォリオの事例を紹介します。 Mana ManaさんはWebデザイン界でも有名でポートフォリオの参考事例としてよく紹介されています。わかりやすさが特徴のデザインとなっています。 ポートフォリオ   フクシマナオキ こちらは1ページにすべてを収めた構成が特徴的なポートフォリオです。ページを新たに読み込むことなくスクロールのみで見ることができ、ストレスのない見せ方ができています。 ポートフォリオ   Jojodesign このポートフォリオは円を基調としたデザインとなっていて、滑らかに動く背景が印象的です。 ポートフォリオ   Shogo Tabuchi 音楽やアニメーションが多く活用され面白みのあるポートフォリオです。 動きを多く表現したいという方は参考になるはずです。 ポートフォリオ   秦 頌光   クールさのあるポートフォリオで、2DのWebサイト上で立体を意識した見せ方をしているのが特徴です。 各画面をスライドショーのように見せているのが印象的ですね。 ポートフォリオ   OH｜割石裕太 わりえもんさんこと割石さんのポートフォリオ。フリマアプリFrilなどのデザインをしてきた実績が紹介されています。 ポートフォリオ   タカヤオオタ MERYのロゴやデザインを手がけた人として有名な方のポートフォリオです。 自分が関わったプロジェクトが見やすく並べられていて、作ったロゴなどが一目で分かるようになっています。 ポートフォリオ   以上、ポートフォリオとは何なのか、何を載せるものなのか説明しました。 実際のポートフォリオも参考にしながら自分が作った作品を載せるポートフォリオを作ってみてください。   また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。 現役のWebデザイナーがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサイトを作ることが可能です。 独学に限界を感じている場合はご検討ください。
Webデザイン

【完全保存版！】デザインを参考にすべき海外のポートフォリオサイト25選

本稿は、Webdesigner Depotのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。またこの記事は、Ezequiel Bruni氏によって、投稿されました。 ご紹介するのは、ミニマリストデザインのサイト、伝統的なデザインのサイト、アシンメントリーなデザインのサイト、実用的ではないけれど実験的でクールなデザインを大胆に試みているサイトです。 今までには到底不可能だと思われたデザインを見ることができます。視差効果(パララックス)を利用して、良い意味で撹乱を引き起こしているデザインもあります！   pixelindustry pixelindustryのポートフォリオは各テーマごとに作成されています。だから、厳密には世界初のオリジナルデザインではないかもしれませんが、ポートフォリオが彼ら独自の強みや才能を示すために役立っていることは、確かです。 もっとも、「テーマのある」ポートフォリオが良い方向に評価されるときにだけ効果的なのかもしれませんが。 pixelindustry   David Alexander David Alexanderのポートフォリオは、広くてゆったりとしていて、画像をメインとしたフレンドリーな印象のフルスクリーンのレイアウトが特徴です。 もしあなたのコンテンツが、テキストが少なめで画像を多用しているとしたら、参考にできる手法です。 David Alexander   [PR] Webデザインで副業する方法とはMartine aimait les films ビデオ制作会社のMartine aimait les films(フランス語で「マルタンはフィルムを愛する」の意)のポートフォリオサイトは、２分割法のようなデザインが素晴らしいです。 ビデオの背景として使われているシンプルでクオリティの高いクリップとの相乗効果で、サイト全体は現代的でプロフェッショナルな雰囲気に仕上がっています。紹介する動画のスタイルとよく合っています。 Martine aimait les films   Aycan Elijah Yilmaz 私が「銀河で表現されたあご髭」を見たのは、このAycan Elijah Yilmazのポートフォリオが2回目でした。 この「銀河で表現されたあご髭」はさておき、ミニマリストデザインには大変参考になる良いサイトです。 Aycan Elijah Yilmaz   Chris Cook Chris Cookのポートフォリオは、シンプルで、モノトーンを基調としていて、美しいタイポグラフィでデザインされています。 私が特に好きなことろは、背景のパターンが微かなトーンで使われている点です。背景のパターンは、現代では時代遅れのデザインとして否定される傾向にありますが、このサイトは上手く取り入れています。 Chris Cook   whitelist ビデオ制作スタジオのwhitelistのポートフォリオは、90年代スタイルのマルチメディアのプレゼンテーションを基本としながら、現代的なテクノロジーと手法が使われています。このような種類のデザインによくあるユーザビリティの問題には、私も批判的な立場ですが、良くないデザインというわけではありません。 余分な装飾の多いファンシーなJavaScriptやアニメーションを削ぎ落とした後に残るのは、美しいミニマリストデザインのサイトです。装飾のため、またUIエレメントや重要なコンテンツに注目を集めるために、珍しい幾何学の図形を使う手法が私は特に好きです。 whitelist   4musketier 4musketierはデザイン代理業の会社と思われます（私はドイツ語が読めないのであくまで推測ですが）。それほど想像力に富んだデザインではありません。模範的なフラットデザインであり、特定のカラースキームというよりも、色とりどりのパステルカラーの虹色を使ったようなデザインとして参考になります。 素晴らしいタイポグラフィ、贅沢に使われているホワイトスペース（余白）などが良い効果をもたらしているデザインです。デザイン全体を通して高い精度があり、一見の価値があります。 4musketier   Lachlan Kincaid Lachlan Kincaidのポートフォリオは、文字通りの意味の「ホワイトスペース（余白）」によって、ミニマリズムの世界を私たちに見せてくれます。 シンプルなデザインのサイトで、紹介する全ての作品に、適切なコンテクストを与えるために、テキストと画像が強調されています。高く評価できる試みです。 Lachlan Kincaid   Electric Enjin Electric Enjinのポートフォリオサイトは、ズームイン効果のある3Dの多面球体の登場から始まることで、衝撃的な印象を与えてくれます。これより先は、実際に見てのお楽しみとしてもらいたいので、話すのを控えます。 潜在的なユーザビリティの問題を別とすれば、これこそデザイナーがFlashを利用したサイトに追求し、その実現が難しいデザインであると表現すれば十分かもしれません。 サイトの他の部分のデザインは明らかにもっとシンプルです。壮観であり過ぎず、それでいて見ていて楽しいデザインです。トップページは訪問者に何かしら考えさせるところがあるデザインです(ブラウザ上で作動すれば)。 Electric Enjin   Olle Olleのポートフォリオサイトは、ミニマリズムデザインと一連のバウハウス（Bauhaus）のデザイン様式を組み合わせています。ページはただデザインされたというよりも、芸術志向です。 デザイナーの方々へのメモ：芸術とは、余分な装飾の多いファンシーなレイアウトのことだけではありません。小さなディテールや全体のカラースキームを、コンテンツに合わせて変化させることも大切です。 Olle   Locomotive Locomotiveのポートフォリオサイトは、マテリアルデザイン（Material Design）を基本としながら、Googleの模範通りには見えない素晴らしい例です。 一部の要素にはマテリアルデザイン（Material Design）に典型的な特徴を見ることができますが、独自の個性もあります。 Locomotive   AREA 17 モダンで美しいデザイン、ブラックとホワイトのコントラストが強調されたカラースキーム、アシンメトリーを組み合わせたのが、AREA 17のポートフォリオです。 私自身、自分のグレースケールのウェブサイトを気に入っていますが、よく知られているように、ほとんど完全なブラックカラー（スクリーン上では完全なブラックカラーに見えます。）を使ったデザインに成功するのは難しいことです。 AREA 17   C RCL C RCLのポートフォリオサイトは、フルスクリーンサイズのカルーセル（回転ベルトコンベアーのような、スライドギャラリーのデザイン）をページの中央に配置するというリスキーな選択をしています。 リスクがあるというのは、このカルーセルが、彼らの紹介する作品を見るためにアクセスする唯一の方法だからです。しかし、それでも美しいデザインにまとめられています。またタイポグラフィも素晴らしいです。 C RCL   Whitehall Whitehallはニューヨークのインテリアデザインスタジオです。プロジェクトの全ての作品を素晴らしい写真で紹介していて、フルスクリーンに表示されます。ウェブサイトの他の部分はシンプルで、ユーザーは必要な情報だけを得ることができます。 「About(概要)」のページのアシンメトリーなデザインには驚きましたが、このサイト上の他の部分にはない、良いデザインに思えます。 Whitehall   Uzik Uzikのポートフォリオサイトは、オリジナリティが高すぎず、上手くデザインされた例の1つです。 画像、テキスト、色など全ての要素が効果的に使われています。時々はデザインの定石に従うことにもアドバンテージがあります。Uzikはそれに成功した例です。サイトを訪問して、見てみることをおすすめします。 Uzik   Dunlop Builders Dunlop Buildersのポートフォリオは、ミニマリストデザインを利用したビジネスサイトの素晴らしい例です。 構成や使われている要素はよくあるようなデザインですが、このサイトならではの個性的なデザインもあります。その個性的なデザインは、主にレイアウトと文字に見ることができますが、画像にも見出すことができます。 Dunlop Builders   David Schweitzer 作曲家のDavid Schweitzerのポートフォリオは、1ページの構成ではありません。しかし、最も重要な情報がトップページに集められているため、1ページの構成と見なすこともできるかもしれません。 ランダムに色を加えられた幾何学的な図形は、それがなければモノトーン調になるウェブサイトに、刺激的で素晴らしい効果を与えています。ただこれらの図形がテキストと重なる部分で、テキストが読みにくくなっています。 私が好きな点は、彼の音楽プロジェクトのコンテンツをクリックすると詳細が表示されるところや、小さなメディアプレーヤーでサンプル音楽を視聴できるところです。 David Schweitzer   Geordie Wood Geordie Woodのポートフォリオは率直に言って、実用向きではない散らかったデザインです。一見、どこにメインのナビゲーションがあるのかさえわかりません。ページの右上にある矢印の要素がナビゲーションかと思ったらそうではなくて、写真家の名前のテキストをホバーしたときに現れるようになっていました。 この散らかりようは別にしても、タイポグラフィの使い方や、ホバー時にはクリックが終了するまでテキストが画像上に留まって表示されるデザインが好きです。写真の画像のホワイトスペース（余白）はそれぞれ異なる比率で与えられているのも、良いデザインです。実験的で予測不可能な印象が、紹介している写真と合っています。 ナビゲーション要素は修正されるべきですが、デザインは好きです。 Geordie Wood   Sam Lord Flavin Sam Lord Flavinのポートフォリオでは、実験的なデザインを試みています。 このサイトは彼の主な3つのスキルセットを示す目的で使われているようです。アシンメトリーデザインと視差効果(パララックス)が、驚くほど良い効果を生んでいます。 Sam Lord Flavin   Villa
Webデザイン

Photoshopでアンチエイリアスをかける方法【初心者向け】

コンピューターで図形などを描画する際、ピクセル単位のギザギザ(ジャギーと呼ばれるもの)が発生する場合があります。そんな時に、Photoshopのアンチエイリアス機能を使用すると、それらを目立たなくさせることが可能です。 今回は初心者向けに、アンチエイリアス機能の使い方を紹介します。 目次CSSでフォントをメイリオにする方法についてメイリオというフォントについてサイト内のフォントをメイリオ指定してみよう！【参考資料】メイリオが入っていないMacOSではどうなるの？監修してくれたメンター (※今回の作業はすべてAdobe PhotoShop CCのバージョンで行っています)   大石ゆかり 田島メンター！！カンバスに楕円形ツールで丸を描いたんですが、何かギザギザした感じになってしまったんです…… 田島悠介 もしかして何かの拍子で「アンチエイリアス」のチェックを外してしまっていたんじゃないかな。 大石ゆかり アンチエイリアスっていうのは何ですか～？ 田島悠介 ツールを選択したときに上のオプション欄に出ているはずだよ。まずは画面で確認してみよう。   図形描画にアンチエイリアスを反映させる方法 円などの曲線のある図形を作成する際にアンチエイリアスを使用する方法を紹介します。 まずは、アンチエイリアスが反映されていない状態を試してみましょう。 ツールパネルの「楕円形選択ツール」を選択し、画面上部のオプションバーの「アンチエイリアス」にチェックが入っていない状態にします。   カンバス上に、適当な大きさの選択範囲を作成します。 作成した選択範囲に「塗りつぶしツール」を使って色を付けてみましょう。 ※塗りつぶしツールは、ツールパネルの「グラデーションツール」を長押しすると表示されます。 以下が塗りつぶし後の結果です。 曲線の部分が滑らかでなく、ピクセルの形が目立ってギザギザになっている(ジャギーのある)状態です。 このギザギザを目立たなくさせるためにアンチエイリアスの機能を使います。   今度は、アンチエイリアスが反映されている状態と比べてみましょう。 楕円形選択ツールが選ばれていることを確認し、今度は「アンチエイリアス」にチェックを入れます。   先ほどと同じように円の選択範囲を作成します。 同様に塗りつぶしツールを使って色を付けてみましょう。 左が最初にアンチエイリアスなしで描画した円、右がアンチエイリアスを使用して描画した円です。 先ほどと違い、曲線部分のギザギザが目立たなくなっているのがわかります。   田島悠介 ふたつの画像を見比べてみよう。 大石ゆかり アンチエイリアスにチェックが入っていないと、ギザギザが見えるんですね。 田島悠介 アンチエイリアスは図形だけでなく、文字にも反映されるんだ。 次の例を見てみよう。   文字入力にアンチエイリアスを反映させる方法 文字を入力する際にアンチエイリアスを使用する方法を紹介します。   文字入力でもアンチエイリアスの反映されていない状態を試してみましょう。 ツールパネルから「文字ツール」を選択します。   画面上部のオプションバーにある、赤枠で囲った枠内の項目が「なし」になっていることを確認します。   文字を入力してみましょう。 以下のようにギザギザがかなり目立っている状態になります。 では次に、先ほどの項目で「強く」を選択します。   もう一度同様に文字を入力します。 以下は、上が先ほどの文字、下がアンチエイリアス(強く)を使用した状態の文字です。 見た目にもはっきりとギザギザが目立たなくなっているのがわかります。 アンチエイリアスの処理は特に文字入力の際、綺麗に仕上げるために必要になります。   [PR] Webデザインで副業する方法とはまとめ 今回は初心者向けに、Photoshopでアンチエイリアスをかける方法を紹介しました。 図形描画の際のアンチエイリアスはオン/オフの切り替えのみですが、文字入力の際には複数の項目が選択でき、好みのアンチエイリアス具合に調整できるようになっています。 ピクセル単位で色分けをするドット絵などを作成する場合には、アンチエイリアスはなしにすると良いですが、そうでない場合は基本的にアンチエイリアスを反映させておくと良いでしょう。   田島悠介 意図的にギザギザを見せたいような場合以外では、基本的にアンチエイリアスのチェックはオンにしておくといいね。 大石ゆかり 今確認したら、さっき私が円を作成したとき確かにチェックが外れていました。 田島悠介 アンチエイリアスは他にも選択範囲を作成したときに、その境界を滑らかにするなどの機能があるよ。 自然な編集を行いたい場合に必要な機能なので覚えておこう。 大石ゆかり 分かりました！ありがとうございます！   Photoshopを学習中の方へ これで解説は終了です、お疲れさまでした。 Photoshopを調べたけど分かりづらい 副業や転職後の「現場で使える」知識やスキルを身につけたい Photoshopの学習や情報収集をしていて、このように思ったことはありませんか？ テックアカデミーのPhotoshop講座では、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。 合格率10%の選考を通過した、選ばれたWebデザイナーのチャットサポートを受けながら、初心者でもフォトレタッチをマスターできます。
Photoshop

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。 文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。 すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。 目次CSSでフォントをメイリオにする方法についてメイリオというフォントについてサイト内のフォントをメイリオ指定してみよう！【参考資料】メイリオが入っていないMacOSではどうなるの？監修してくれたメンター そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。 田島悠介 どうして文字を探したいのかな？ 何かの文字で区切っているから？それとも文字の位置を探したい？ 大石ゆかり ええと、文字を探す方法がそんなにいろいろあるんですか？ 田島悠介 そうなんだ。PHPではいろんな文字列の検索方法があるよ。 まずは、区切り文字で検索する方法から見てみよう！   区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。 区切る文字列を境にして文字列を取得したいときに使えます。 構文 検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。 第2引数は検索する文字列です。 検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。 第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。 戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。 たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。 ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。 もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。   strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。 ソースコード フルネーム「山田 太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田 太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「 太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。 表示結果 解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。 検索対象の文字列
PHP

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン CSS CSSでフォントをメイリオにする方法を現役デザイナーが解説【初心者向け】