Web業界でよく使う用語の英語辞典

thumb_jargon

英語のサイトにはたくさんの素敵情報が溢れていますが、なんだかハードルが高く感じていませんか?頑張って読んでみたけどわからない単語につまづいたり。という事でWeb業界でよく使う英単語を、過去のメールのやり取りを読み返したりして思いつく限り書いてしました(そのままカタカナになっている単語は省きます)。ポイントをおさえれば「「英語だから…」なんて拒否っちゃ駄目なWEB屋が知っておくべき厳選ブログ、WEBマガジン色々」で紹介されているようなサイトもスラスラ読めるようになるかも!?


目次

  1. あ行
  2. か行
  3. さ行
  4. た行
  5. は行
  6. ま行
  7. や行
  8. ら行

あ行

値 – Value

HTML、CSS、JavaScriptなどなど、いろんな場面で出てきますね。

You can get the value of a form element using JavaScript.
JavaScriptを使ってフォーム要素の値を取得できます。

アンケート – Survey

感想を書いたりするものは Survey、単純に投票するだけなら Poll や Vote です。ちなみに「アンケート」はフランス語だそうです。

We’d like to add a simple survey on our website.

私たちのサイトに簡単なアンケートを設置したいです。

ECサイト – E-commerce website

ECは E-Commerceの略ですが、英語では略して使いません。

Have you ever built an e-commerce website?

ECサイトを作った事はありますか?

入れ替える – Replace

Replace A with B – AをBと入れ替える…と使います。レイアウトを変える時や内容に変更があるときによく使います。

Can you replace this illustration with a new photo.
このイラストを新しい写真に入れ替えてください。

入れ子にする – Nest

入れ子になったリストは Nested lists です。

It’s possible to nest UL and OL lists.
ULとOLリストを入れ子にすることは可能です。

上書きする – Overwrite

上書きしちゃった時は過去形 overwrote を使います。バックアップは大切です。

Is it really ok to overwrite these two files?
この2つのファイルって本当に上書きしていいの?

目次へ。

か行

階層 – Hierarchy

カタカナで「ヒエラルキー」と読むようですが、英語だと「ハイアラーキー」です。

A clear hierarchy lets users know what is important in your website.
わかりやすい階層はあなたのWebサイトで何が大切かをユーザーに知らせる事ができます。

概要文 – Summary

説明文(description)を短くした文章ですね。

Add summary beside a thumbnail image.
サムネイル画像の横に概要文を置いて。

箇条書きリスト – Bulleted list

箇条書きリストの最初についてるマーカーのことを Bullet や Bullet points と呼びます。

I want to increase the spacing between bulleted lists and this image.
箇条書きリストとこの画像の間のスペースを広げたい。

カッコ – Bracket / Brace

コーディングする時にちょいちょいでてきます。例えば{}は Curly brackets、() はRound brackets、<> はAngle bracketsなどなど。

It doesn’t work because you missed one of curly brackets.
波括弧をひとつつけ忘れてるから、それじゃちゃんと表示されないよ。

カラーコード – Hexadecimal Codes

Colour codeを使うこともあります。Hexadecimalは16進法のこと。単純にHEXと使うことも。

Text color should be HEX #999
テキストの色は#999です。

管理ページ – Admin page

管理者のことを Administrator 略して Admin と呼びます。

What is the password for admin page?
管理ページのパスワードは何ですか?

外部ファイル – External file

同様に外部CSSは External CSS、外部JavaScriptは External JavaScriptになります。

How can I link an external CSS file?
外部CSSファイルってどうやってリンクさせるの?

記事 – Article

HTML5の要素にもあるので覚えている人も多いかも?Blog post や post を使うことも。

Have you read this article yet?
もうこの記事読んだ?

機能 – Function

Function は「関数」も意味しますが、Webサイトを作る上では「機能」という意味で使う事が多いですね。

You don’t have to add a search function to our website.
サイトに検索機能はつけなくていいです。

キャンペーンモニター – Campaign Monitor

人気のメールマガジン管理サービス、「Campaign Monitor」のこと。Eメールマーケティングをしている多くの企業がこのサービスを使っています。メールマガジンの話題の時に突然「CM」という表記があればこのCampaign Monitorを差します。

You can create an original Campaign Monitor template with a few simple tags.
簡単なタグを使ってオリジナルのキャンペーンモニター用テンプレートが作れます。

共有サーバー – Shared server

共有してるから Share …そのままです。専用サーバーは Dedicated server です。

What’s the difference between shared and dedicated servers?
共有サーバーと専用サーバーって何が違うの?

緊急の – Urgent

メールで「Urgent」の文字があったら気を引き締めて急いでとりかかりましょう。

I found bugs on our website which is urgent.
私たちのサイトで緊急のバグを見つけました。

掲示板 – Forum

Board より Forum を使います。

It’s easy to add a forum to your blog using WordPress plugins.
WordPressプラグインを使えばブログに掲示板を追加するのは簡単です。

原稿文 – Copy

コンテンツ内容になる原稿、文章のこと。コピー機を使った「コピー」はPhotocopy を使ったりします。

Please change the copy from “Enter your coupon number” to “Enter your coupon code”
文章を「クーポン番号を入力」から「クーポンコードを入力」に変更してください。

公開する – Publish

ブログ記事などを公開するときは Publish を使います。

I will publish a new article tomorrow morning.
明日の朝、新しい記事を公開します。

広告 – Ad

広告は英語で Advertisement ですが、略して Ad や Ads と呼ばれます。広告のサイズはピクセルで指定される場合と、「Medium Rectangle」、「Skyscraper」などアドセンスのサイズで直接指定される場合があります。

Can you add a logo to image ads?
イメージ広告にロゴを追加してください。

構成・構造 – Structure

プロジェクトを始める前の会議なんかで出てくる単語ですね。

Let’s think about this website structure.
このWebサイトの構成について考えよう。

構文・文法 – Syntax

構文と文法、どっちをよく使うのかわかりませんが、主にプログラミングの書き方を説明する時によくでてきます。

The basic syntax of for loop in PHP is: for( condition ){ do something }
PHPでのForループの基本文法は: for( 条件 ){ 実行内容 }

目次へ。

さ行

最新の – Latest

最新のプロジェクト – Latest Project、最新の記事 – Latest Post など、ちょいちょい使い道があると思います。

“latest posts” widget is displayed on a sidebar.
「最新記事」のウィジェットはサイドバーに表示されています。

彩度 – Saturation

色の三属性のひとつ。彩度を下げることを Desaturate と言います。

Press Command + U and drag the slider to adjust saturation in Photoshop.
Photoshopでコマンド+Uを押してスライダーをドラッグすれば、彩度を調整できます。

サブページ – Internal page / subpage

単純に sub page と呼んだりもしますが、「内部の」という意味の internal も使われます。

Can you remove a main image from internal pages?
サブページからメイン画像をとってください。

色相 – Hue

「ヒュー」と発音します。色の三属性のひとつ。デザインのお勉強ででてくるかも。

Let’s have a look colour schemes based on the 12 hue colour wheel.
12色相環を元にした配色を見てみましょう。

仕切り線 – Divider

単純に line や separator と言ったりもします。

You can download free divider images from here.
ここで無料の仕切り線画像をダウンロードできるよ。

承認する – Approve

デザインのOKがでたときなどにクライアントから言われます。メールにこの単語があれば喜びましょ!

Your design is approved by client!
君のデザイン、クライアントからOK出たよ!

商品一覧ページ – Catalog page

他にも list page, item list など、違う言い方がありますが、これが一番使われている気がします。

Can you sort products by popularity on catalog pages?
商品一覧ページで商品を人気順に並び替えられる?

商品詳細ページ – Product page

他にも detail page, item page など、違う言い方がありますが、これが一番使われている気がします。

Can you add credit card icons on product page?
商品詳細ページにクレジットカードのアイコンを追加してください。

条件分岐 – Conditional

Condition は条件のことです。例えばIEに対応させるために使う条件付きコメント、 <!--[if IE 6]>こういうやつ<![endif]--> を Conditional comments、WordPressの条件分岐タグ、<?php is_home(); ?> ←こういうやつを Conditional tags と呼びます。

Are conditional comments CSS hacks?
条件付きコメントってCSSハックなの?

推薦文 – Testimonial

果たしてこの日本語訳は正しいのか…。クライアントや商品を使ったユーザーが「こんなによかったよ!」という文章です。おすすめ文?

Could you add the following testimonial?
こちらの推薦文を追加してください。

静的な – Static

変化しないこと。Static page で静的ページです。対義語は Dynamic。

You don’t have to use WordPress, it’s just static HTML website.
WordPressは使わなくていいです。HTMLの静的サイトです。

整列 – Alignment

右揃えは right aligned、左揃えは left aligned と表現します。

Alignment is one of the most important elements in design.
整列はデザインにおいて重要な要素のひとつです。

専用サーバー – Dedicated server

Dedicated で専用のって意味です。共有サーバーは Shared server です。

Why don’t you move your website to a dedicated server?
サイトを専用サーバーに移行しちゃいなよ?

素材画像 – Stock photos

有名所iStock Photoのサイト名にもなっているので聞き覚えがあるかもです。

Can I buy stock photos from this website?
このサイトで素材画像買ってもいいですか?

属性 – Attribute

HTMLのチュートリアルなんぞ読んでいたら必ずでてきます。

Don’t forget to provide the alt attribute for an img element.
img要素にalt属性を与えるのを忘れないでください。

目次へ。

た行

ダミー画像 – Placeholder (image) / dummy image

日本語ではアテやアタリですかね?Dummy image を使うこともありますが、こちらを略して PH とすることもよくあります。

We haven’t got that image yet, just use placeholder image for now.
まだその画像もらってないんだ。とりあえずダミー画像使っておいて。

添付する – Attach

メールでやり取りする時に腐るほど使うので嫌でも覚えます。その時は過去形ではなく現在完了形を使うのがポイント。

I’ve attached a PDF file.
PDFファイルを添付しました。

問い合わせ – Enquiry / Contact

EnquiryとContactは同じ意味です。アメリカ英語だとInquiryとつづります。

Please fill out the following enquiry form.
こちらのお問い合わせフォームにご記入ください。

透過 – Transparent

透明や透明度は Transparency。

IE6 doesn’t support transparent PNG.
IE6は透過PNGをサポートしていない。

統合する – Integrate

「統合する」という言い方が正しいのか謎です。すみません。FacebookとGoogle+の内容を一緒にしたり、TwitterをWebサイトに表示させる時に使います。withではなくandでも同じ意味のはず。

How to integrate Twitter with Facebook
TwitterとFacebookを統合する方法

動的な – Dynamic

変化すること。Dynamic page で動的ページです。対義語は Static。

“Company News” area will be dynamic.
「企業ニュース」は動的エリアです。

目次へ。

は行

配色 – Colour scheme

色の事について書いた記事にはよくでてくる単語です。Schemeは「スキーム」と読みます。

Which colour scheme do you like better?
どっちの配色が好き?

番号付きリスト – Ordered list / Numbered list

order は順序のこと。順番のついたリストという意味です。そのままです。

How can I style an ordered list?
番号付きリストってどうやって装飾するの?

パンくずリスト – Breadcrumbs / Breadcrumb navigation

Breadcrumbはパンくずのこと。そのままですね。ちなみに最後の「b」は発音しません。

Where can I find breadcrumb navigation plugins for WordPress?
パンくずリストのWordPressプラグインってどこにある?

表示する – Display

「ブラウザー上でこう表示される…」「うまく表示されないから…」などなど、かなりの頻度で使います。「◯◯が表示されている」と言う時(そういう使い方の方が多い)は受動態で、「◯◯ is displayed」となります。

All images are not displayed!
全部の画像が表示されてない!

微調整 – Tweak

「少しTweaksがあるよ」なんてメールがきたら、たいてい少しではすみません。

Looks great! But I have some small tweaks.
いいね!でも少し微調整する箇所があるよ。

ファーストビュー – Above the fold

First View は使いません。この言葉はもともと新聞の一面記事を表現するときに、新聞の折り畳み線(Fold)より上が一番見てもらえる範囲であることからWebでも使われるようになったようです。ファーストビュー以下の範囲は Below the fold です。

Main navigation must be above the fold.
メインナビゲーションはファーストビュー内になければならない。

複製する – Duplicate

ファイルやPhotoshopのレイヤーを複製するときに使います。

Duplicate this layer first.
まずこのレイヤーを複製してください。

ベースキャンプ – Basecamp

37 Signalsの人気プロジェクト管理サービス、「Basecamp」のこと。詳しくは「プロジェクト管理ツール「Basecamp」の使い方」参照。使っている企業が多いので「え?Basecampって何?」とならないように覚えておくと◎。

All documents are on Basecamp.
全ての文書ファイルはベースキャンプにあります。

変数 – Variable

PHPの $ で始まる、値が入る入れ物のような物を変数と言います。PHPのお話になったら必ず出てくる単語です。

All variables in PHP start with a $ sign symbol.
PHPで使う全ての変数は $ マークで始まります。

目次へ。

ま行

見出し – Heading / Headline

HTMLタグの h1〜6 の H はこのHeadingの意味です。

I styled a heading with CSS.
CSSで見出しを装飾した。

メール – Email

Mailだと郵便になるので、必ず最初に「E」を付けます。同じ理由でメールアドレスも Mail Address や Address ではなくEmail Addressです。

I sent PSD files by email.
PSDファイルをメールで送りました。

メールマガジン – Newsletter

Mail Magazine という単語はありません。「購読する」という意味の「Subscribe」と一緒に覚えましょう!

Would you like to subscribe our newsletter?
メールマガジンを購読しますか?

明度 – Value / Lightness

色の三属性のひとつ。「値」と同じ Value です。英語は同じ単語で違う意味なものが多くて困りますね。

HSV stands for hue, saturation and value.
HSVは色相、彩度、明度を意味します。

メイン画像 – Main image / Hero image

そのまんま、Main image と使うことが多いですが、Hero image を使うこともあります。

Which colour would be better for a main image?
メイン画像はどっちの色がいいかな?

文字化け – garbled characters / broken characters

なるべく使いたくないし見たくない単語ですね。

How can I fix these garbled characters?
この文字化けどうやって直すの?

目次へ。

や行

優先・優先事項 – Priority

タスクがたまりすぎて何を優先すればいいのかわからない時に使えます。

The jQuery issue isn’t a priority right now.
jQueryの問題は優先事項ではありません。

要素 – Elements

HTMLのタグについて説明しているときや、デザインの勉強なんかで出てきます。

The tr element defines a table row.
tr 要素はテーブルの行を定義します。

目次へ。

ら行

ライバル社 – Competitor

ライバルは Rival ではなく Competitor を使います。

Let me see a list of competitors.
ライバル社のリストを見せて。

目次へ。

他にもよく使う単語があれば、追加するのでぜひぜひ教えてください! また、私の場合Webで使う用語は海外で習ったので、逆に日本語でなんていうのかわからなかったりします…。「その日本語違う!」というのもご指摘ください!

英語は結構感覚で覚える派なので細かく質問されても答えられないかもです…。ボソッ

シェアする

関連する記事

コメント

  • http://twitter.com/onepercentdsgn バンクーバーのWEB屋

    スンバらしい記事。確かに読む人のことを考えればこういう一覧は激ありがたいと思う。下手すればアプリになりそうですね(笑

    ご紹介も頂いて光栄です!ありがとうございました!

  • Pingback: 「英語だから…」なんて拒否っちゃ駄目なWEB屋が知っておくべき厳選ブログ、WEBマガジン色々 | バンクーバーのWEB屋()

  • http://webcreatorbox.com Webクリエイターボックス

    アプリになりそう…ってのは私も書きながら思いましたwツ黴€今頃どこぞのクリエイターが作りはじめてくださっていることでしょう。
    こちらこそありがとうです :)

  • http://twitter.com/mabi_vivio ヴィヴィオ0

    英語が全くといって苦手な私には、とてもありがたい。
    下手にごちゃごちゃ説明されるより、単純に一覧で出してくれたほうがいいですね。
    変数名やCSSのセレクタ名の候補としてもこういう記事は、ありがたいです。

  • Pingback: ドラッグ&ドロップでスマホサイトへ簡単変換サービスshuttoやFireworksのリソース公開サイトなど今日のまとめ | WDS()

  • j.bond

    Hierarchy のアクセントは「ラ」ではなく、米語・英語ともに「ハ」です。
    「ラ」にアクセントがくるのは hierarchical や hierarchically といった形で使われる場合に限られます。

  • http://webcreatorbox.com Webクリエイターボックス

    あわわほんとだ、ありがとうございます!

  • http://www.luftzug.net/ Akira Miyamoto

    Bullet を慣れた感じで「バレット」というのはやめてほしい

  • Ring Kuroki

    初めまして。畑違いのエンジニアですが、いろいろ参考に読ませて頂いてます。
    そこで質問なのですが、サイトの作成を依頼されたときにデザインやカラーを考えると思います。今私が勉強の一環としてサイト作成をしているのですが、依頼主の主張がまったくなく、出来上がったのを見せるとダメ出しされ作り直す始末。私はプラットフォームやセキュリティ系のエンジニアなので、この合理的じゃないやり方に疑問ばかりです。確かにwebデザインなどの勉強をしてきたわけではないので、細かいところがダメなのかもしれません。が、あまりにも非合理的すぎて???です。こういうとき皆さんはどうされているのかを教えて頂きたく、書き込んでみました。何か突破口があればご教授下さい。よろしくお願いします。

  • http://www.facebook.com/profile.php?id=100001729944545 Minako Sato

    米国に来たばかりでいきなりサイトを作っているので、是非とも参考にさせていただきます。ありがとうございます。

  • Pingback: Web業界でよく使う用語の英語辞典 | その他・ヒント - デザイン・制作ヒント - ウェブデザイン | Jishuu.net()